AV-W20
CSS Gradient & Shadow
Build CSS gradients and box shadows with a live preview and copy the CSS.
● Runs on your device; nothing is uploadedHow to use it
- Choose the Gradient or Box shadow tab.
- For a gradient, set the Type, Angle or centre, and edit the Colour stops.
- For a shadow, set X offset, Y offset, Blur, Spread, Colour and Opacity per layer.
- Check the live preview, then copy the CSS.
Limits
- Colour stops
- 2–12
- Shadow layers
- 8
- Shadow offsets and spread
- −200 to 200 px
- Shadow blur
- 0–300 px
Features
- Linear, radial and conic gradients, with a repeating option
- Stops accept #hex, #hex with alpha, rgb() and rgba()
- Colour picker keeps a stop's existing alpha
- Layered and inset box shadows
- Preview box and background colours can be changed
For AI agents: avtools_css_gradient_shadow
Loading the tool…