A gradient running from a colour to transparent often develops a grey band in the middle. Nothing is broken: the keyword means fully transparent black, so the gradient is interpolating from your colour towards black while the opacity falls, and the midpoint is a half-transparent dark.
The fix is to name the same colour with zero alpha as the end stop. The opacity still reaches zero and the hue never changes, so the fade is clean.
What are the gradient types?
Three, and they differ in the shape of the transition rather than in how the colours are chosen.
| Type | Transition |
|---|---|
| Linear | along a line at an angle |
| Radial | outward from a point |
| Conic | around a centre, like a colour wheel |
Colour stops can be placed explicitly, and two stops at the same position produce a hard edge rather than a blend — which is how a gradient makes stripes.
Banding in a smooth gradient is a display limitation rather than a CSS one. Eight bits per channel across a large area leaves visible steps, and a very slight noise overlay is the usual remedy.
Why does one shadow look wrong?
Because real shadows are not one blur. A single large soft shadow reads as a sticker; layering two or three with different offsets and blurs — a tight dark one close in, a wider faint one further out — reads as depth.
The properties are position, blur, spread and colour, and spread is the one most often misunderstood. It grows or shrinks the shadow before blurring, so a negative spread with a large blur produces a soft shadow that stays tucked under the element.
The inset keyword flips the whole thing inward, which is how a pressed button or an inner glow is made. It is the same four numbers doing the opposite job.
What does the slash in border-radius mean?
It separates horizontal radii from vertical ones. The shorthand accepts up to four values before the slash and four after, giving eight numbers in total, and that is what allows a corner to be elliptical rather than circular.
Without the slash every corner is a quarter circle. With it, a corner can be wide and shallow, which is how organic blob shapes are made from a single element.
Percentages behave differently from lengths here. A percentage radius is relative to the element’s own dimensions, so a fifty per cent radius on a square gives a circle and on a rectangle gives an ellipse.
When is clamp the right answer?
For a value that should scale with the viewport but stop at both ends. It takes a minimum, a preferred value and a maximum, and returns whichever is appropriate — which replaces a stack of media queries with one line.
There is an accessibility trap. A preferred value expressed only in viewport units does not respond to the browser’s text size setting, so text sized that way cannot be zoomed by a reader who needs it larger. Including a relative unit in the preferred value restores that.
The same pattern works for spacing and widths, where the concern does not apply. Fluid padding between a sensible minimum and maximum is one of the cleanest uses of it.
What is the difference between auto-fit and auto-fill?
What happens when there are fewer items than columns. Both repeat a track as many times as fits; auto-fill keeps the empty tracks and auto-fit collapses them, so the existing items stretch to fill the row.
Combined with a minimum and maximum track size, that one distinction produces a responsive grid with no media queries at all — items wrap when they run out of room and grow when they do not.
The fractional unit is the other half. It distributes leftover space after fixed tracks are placed, which is why a layout mixing a fixed sidebar with a flexible main area needs no arithmetic.
Which units belong in these values?
Relative ones almost everywhere. A shadow, a radius or a gap expressed relative to the font size scales with the design rather than fighting it, and it responds correctly when a reader changes their text size.
Pixels remain right for the things that genuinely are fixed — a hairline border, an icon-sized offset — where scaling would make them look wrong rather than proportionate.
The mistake worth avoiding is mixing them without a reason. A layout where some spacing scales and some does not looks correct at the size it was designed at and comes apart at every other one.
Questions people ask
Do these properties need prefixes now? Not for anything covered here. The prefixed forms are historical and safe to drop.
Does minifying CSS change behaviour? It should not. Order is preserved, because the cascade depends on it.
Are long shadow chains slow? Many large blurred shadows can cost paint time. Two or three is not a problem.
Can gradients be animated? Not directly between arbitrary gradients. Animating a position or an overlay is the usual approach.
Should I generate or hand-write these? Generate to explore, then keep the result readable. Nested shorthand is hard to edit blind.
Build it visually, then paste the rule. The gradient generator, box shadow generator and border radius generator cover the visual properties, the grid generator lays out the tracks, the clamp generator and fluid typography calculator handle scaling values, and the CSS formatter and minifier tidy the result.