Box-Shadow & Gradient Generator
Adjust sliders to build a CSS box-shadow and gradient, with a live preview and ready-to-copy code.
Instead of guessing box-shadow offset and blur values, drag the sliders for X/Y offset, blur, spread and colour and watch a live preview update in real time. A gradient generator sits alongside it for building two-colour linear gradients. Both output clean, copy-ready CSS you can paste straight into your stylesheet.
How to use it
- Drag the X, Y, blur and spread sliders to shape the shadow.
- Pick a shadow colour.
- Copy the generated box-shadow CSS.
- Do the same with the gradient colours and angle for the gradient CSS.
Frequently asked questions
What do X and Y offset control?
X moves the shadow left/right and Y moves it up/down relative to the element — positive Y typically creates a shadow that reads as 'below' the element.
What's the difference between blur and spread?
Blur softens the shadow's edges, while spread expands or shrinks the shadow's size before blurring is applied.
Can I use multiple box-shadows on one element?
Yes, CSS supports comma-separating multiple shadow values, though this tool generates one shadow at a time — you can combine outputs manually.