// free · runs in your browser · nothing uploaded
CSS Box Shadow Generator with Layers
Build soft, layered box shadows with a live preview and copy the CSS or Tailwind class.
layer 1
layer 2
box-shadow: 0px 1px 2px 0px rgb(20 19 43 / 0.08), 0px 8px 24px -8px rgb(79 70 229 / 0.35);
shadow-[0px_1px_2px_0px_rgb(20_19_43_/_0.08),_0px_8px_24px_-8px_rgb(79_70_229_/_0.35)]
Works in all modern browsers. Your design is saved in the share link, so you can send it to a teammate.
📚 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.