🌑 Dev

CSS Box Shadow Generator

Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.

Example element

box-shadow

How to use?

Tweak the parameters of each shadow layer and watch the result update in real time. Stacking several layers gives more elaborate effects. Turning on inset switches the shadow to an inner one, with a cutout look.

Create CSS shadows with live preview

The box-shadow property gives depth to cards, buttons and boxes. Getting the values right by hand, though, turns into a trial-and-error exercise, between offset, blur and spread. Here the generator shows the shadow shifting in real time as you tweak each parameter.

You control colour, blur, spread and offset, switch inset mode (the inner shadow) on or off, and stack several layers when you want a more elaborate effect. Once the result reaches the point you were after, one click copies the ready CSS to paste into your project.

Everything happens in the browser. It's a direct tool for designers and developers to add depth to an interface without having to memorise the property's syntax.

Frequently asked questions

Why does the copied CSS use rgba when I picked the colour in a hex swatch?

Because colour and opacity are two separate controls here. The swatch returns only the hex value, and the opacity slider sets the alpha channel; when the code is assembled the two collapse into a single rgba function. The page opens with black at 15%, which yields rgba(0,0,0,0.15). To keep hex in your stylesheet, swap it by hand after copying: box-shadow takes hex fine, you just lose the opacity slider.

How many shadow layers can I stack?

Four at most. The add-layer button disappears as soon as the list reaches four shadows. Every layer holds its own horizontal, vertical, blur, spread, colour, opacity and inset setting, and they all come out in a single box-shadow declaration, comma separated, in the order shown on screen — the first one in the list paints on top of the rest. Need a fifth? Add it by hand to the code you copied.

How far do the sliders on each layer go?

Horizontal and vertical offset run from -50 to 50 pixels, blur from 0 to 80, spread from -20 to 40, and opacity from 0 to 100%. The starting layer sits at 4 px on both axes, 12 px of blur and black at 15% — deliberately subtle, which tends to be what cards and buttons want. Values beyond those ranges are still valid CSS: just edit the number in the copied code.

Related Tools

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.

🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.

🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.

🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.

🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.

🌬️

Tailwind Config CLI Generator

Generate a ready-to-use tailwind.config.js for the Tailwind CLI, with content paths and theme set up. Copy it and start styling in seconds.