CSS generator
Build a gradient, shadow or border radius and copy the CSS.
Adjust it, see it, copy it
Pick what you are building, move the controls, and the preview updates alongside the CSS. Copy the declaration straight into your stylesheet.
Gradients
The angle runs clockwise from the top: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. The most common surprise is expecting 0deg to mean left to right, as it does in some design tools.
For a gradient that fades to nothing, use the same colour twice with the second at zero alpha rather than fading to white — fading to white produces a grey band partway through, because the intermediate colours pass through grey.
Shadows
The single most common mistake is too much opacity and too little blur, which produces a hard dark smear. Real shadows are soft and faint: a large blur at 10–25% opacity reads as depth, where 60% reads as a mistake.
Offsetting downward matches how people expect light to fall. A shadow offset upward looks subtly wrong even when the viewer cannot say why.
Border radius
A single value rounds every corner. Worth knowing: nesting a rounded box inside another looks wrong unless the inner radius is smaller by roughly the padding between them — matching them exactly makes the inner corner appear to bulge.
A very large value on a square element gives a circle, which is how avatar cropping is usually done.
Performance
Shadows and gradients are painted by the browser on every repaint. A handful is free; dozens of large blurred shadows on a scrolling list is a genuine cause of jank on mid-range phones. If a page stutters while scrolling, this is one of the first things to look at.
Nothing is uploaded
Everything is generated in your browser.
Common questions
Which way does the gradient angle go?
Clockwise from the top: 0deg is bottom to top, 90deg is left to right.
Why does my shadow look harsh?
Too much opacity and not enough blur. Real shadows are large and faint — try 10–25% opacity.
Why does my gradient go grey in the middle?
Fading to white passes through grey. Fade to the same colour at zero alpha instead.
What radius should a nested box use?
Smaller than its parent by roughly the padding between them, or the inner corner appears to bulge.
Do shadows affect performance?
Large blurred shadows are repainted constantly. Dozens on a scrolling list can cause visible jank.