CSS Shadow & Gradient Generator
Build box-shadows and gradients visually. Add multiple shadow layers, each with its own offsets, blur, spread, color and inset toggle. For gradients, choose linear, radial or conic and add as many color stops as you need. Live preview updates as you adjust.
How to use
Choose shadows or gradients
Switch between the Shadows and Gradients tabs.
Adjust the controls
Set offsets, blur, spread, colors, opacity or gradient angle and stops.
Preview in real time
The live preview updates as you adjust each control.
Copy the CSS
Click Copy to copy the generated CSS to your clipboard.
Features
Box-shadow editor
Add multiple shadow layers, each with its own offsets, blur, spread, color and inset toggle.
Three gradient types
Linear, radial and conic — with an angle for linear and conic.
Unlimited color stops
Add as many color stops as you need, each with a position from 0% to 100%.
Live preview
See the result on a sample figure as you adjust the controls.
Common use cases
- Design a soft drop-shadow for a card
- Build a colorful gradient background for a hero section
- Create a layered shadow effect for a button
- Prototype CSS effects before writing the code