More
More
CSS Generator: Gradient, Shadow & Radius
Gradients, box shadows and rounded corners with live preview and copy-ready CSS.
Free. Runs in your browser: nothing you enter or open is uploaded.
Drag the markers on the bar to move a colour stop, or use the arrow keys on a marker.
The preview is drawn by your own browser from the same CSS you copy. Conic gradients and repeating gradients work in every current browser; very old browsers ignore them.
How to use it
- Pick a tab: Gradient, Box shadow or Border radius.
- Change the settings and watch the preview update. For gradients drag the stop markers; for shadows add as many layers as you need.
- Press Copy and paste the CSS rule into your stylesheet.
Questions
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads out from a centre point as a circle or ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which is how pie charts and colour wheels are drawn.
Why use several shadow layers?
Real shadows are soft near the object and fade further away. Stacking a small sharp shadow with a larger blurred one looks more natural than a single shadow, which is why many design systems use two or three layers.
What does an elliptical corner do?
Each corner gets a horizontal and a vertical radius. When they differ, the corner is a quarter of an ellipse rather than a circle, which gives leaf and blob shapes. In CSS the vertical values come after a slash.
Do I need vendor prefixes?
No. Gradients, box shadows and border radius have worked without prefixes in every mainstream browser for years.