CSS Gradient & Shadow Generator
Build linear and radial gradients and soft box shadows with a live preview, then copy the CSS.
Runs in your browser — nothing is uploaded
Gradient builder
Box shadow builder
Related tools
How to use the CSS Gradient & Shadow Generator
- In the Gradient builder, pick Linear or Radial, then set the angle (linear only), colours, and stop positions — tick the middle-stop option for a third colour.
- Watch the gradient preview update live, then click Copy gradient CSS to copy the background declaration.
- In the Box shadow builder, adjust the offsets, blur, spread, colour, opacity, and the inset option.
- Check the shadow on the preview card, then click Copy shadow CSS to copy the box-shadow declaration.
Frequently asked questions
Is anything uploaded to a server?
No. The previews and CSS are generated entirely in your browser using JavaScript. Nothing is uploaded, stored, or sent anywhere.
What is the difference between linear and radial gradients?
A linear gradient blends colours along a straight line at the angle you set. A radial gradient blends colours outward from the centre in a circle, so it has no angle setting.
What do the colour stop positions mean?
A stop position is where that colour sits along the gradient, from 0% at the start to 100% at the end. CSS blends smoothly between neighbouring stops.
What does an inset box shadow do?
A normal box shadow falls outside the element's box. An inset shadow is drawn inside the box instead, which gives a pressed-in or inner-glow effect.
Why does the shadow colour use rgba()?
The opacity slider needs an alpha value, so the hex colour is converted to rgba() — for example, #14141f at 25% opacity becomes rgba(20, 20, 31, 0.25).