// free · runs in your browser · nothing uploaded
CSS Gradient & Shadow Generator
Design CSS gradients (linear, radial, conic) and layered box shadows with a live preview, then copy the CSS or a Tailwind class. Share your design with a link.
📚 Official sources: MDN gradients · MDN box-shadow
We build every tool from the official rules and re-check them when they change. Always confirm with the official source before you rely on a result.
🛠️ Spotted a mistake or an out-of-date rule? Tell us
Questions people ask
How do I use the CSS?+
Copy the line and paste it into your stylesheet, for example on a .card or .hero class. For Tailwind, paste the arbitrary value class (like bg-[linear-gradient(...)]) into your className.
Linear, radial or conic?+
Linear goes in a straight line at the angle you choose. Radial spreads out from the centre in a circle. Conic sweeps around the centre like a colour wheel or pie chart.
Why use several shadow layers?+
Real shadows are soft and sharp at the same time. A tight, faint layer plus a large, blurred one looks far more natural than one heavy shadow.