CSS Gradient & Shadow Generator
Design gradients and box shadows visually and copy the CSS.
0 – 360° (start angle for conic)
Order: color, position (%), opacity (%). At least 2 stops required.
The first layer is painted on top. At least 1 layer required.
Gradient CSS
Shadow CSS
All input is processed entirely in your browser — never uploaded or stored.
What is this tool?
The CSS gradient & shadow generator lets you tune linear, radial and conic gradients and multi-layer box-shadows visually, then copy the finished CSS value in one click. Changing color stops, opacity or angle updates the preview and the code together.
How to use
- Gradient: pick a preset or adjust type, angle and color stops, then copy the
backgroundvalue. - Shadow: add layers and adjust X, Y, blur, spread, color, opacity and inset, then copy the
box-shadowvalue.
Privacy & processing
Everything runs in your browser. Your input is never uploaded or stored.
FAQ
How do linear, radial and conic gradients differ?
Linear changes color in a straight line along an angle, radial spreads outward from a center in a circle, and conic sweeps clockwise around a center point.
What does a color stop's position (%) mean?
It is the point, on a 0–100% scale along the gradient line, where that color is reached in full. Stops placed close together give a sharp edge; stops placed far apart blend softly.
Why layer several box-shadows?
Combining a tight, shallow shadow with a large, soft one looks more natural than a single layer. Layers are comma-separated, and the first one listed is painted on top.
How does opacity change the output code?
At 100% opacity the color is written as #RRGGBB; below that it becomes rgba(r, g, b, alpha). Both work in every modern browser.
Is my input sent to a server?
No. Preview rendering and code generation happen entirely in your browser; your input is never uploaded or stored.
Advertisement