Developer tools
CSS gradient / box-shadow generator
Design a CSS gradient or a box shadow with sliders and a live preview, then copy the CSS.
CSS Gradient & Box Shadow
background: linear-gradient(90deg, #3b82f6, #ec4899);
How to use CSS gradient / box-shadow generator
- Design a gradient or a box shadow with the sliders, watching the live preview.
- Copy the generated CSS.
- Paste it into your stylesheet and check it in the browser.
A good use for this
Creating a gradient background or a card shadow without writing the CSS syntax by hand.
Limits
The preview is a single box on this page — check the result against your own layout, fonts, and background before shipping it.