CSS box shadow generator
Drag the shadow, stack the layers, and copy the code as CSS, SCSS, Tailwind or Stylus. Free, no account, every shadow shareable by URL.
box-shadow: 0 12px 24px rgba(27, 35, 64, 0.18);
border-radius: 16px;Box shadow presets
Tap one to load it into the generator, then make it yours. Every tile wears the real shadow.
How the CSS box shadow generator works
The box in the light table is a real element with a real box-shadow, painted onto this page rather than into a screenshot. What you see is what your visitors will see. Three moves get you from a blank box to code you can paste:
- Drag the shadow. Pull the handle to set the offset, or use the X and Y sliders. Blur softens the edge; spread makes the shadow larger or smaller before it is blurred. The warm light on the page moves the opposite way, because that is what a light does.
- Stack the layers. One shadow looks like a sticker. Press the plus button and the generator adds a second layer, wider and softer than the first, so the box starts to read as an object with depth. Each layer has its own offset, blur, spread, colour, opacity and inset switch, and you can reorder or hide them.
- Copy the code. The readout writes the
box-shadowvalue as you work, as plain CSS, an SCSS variable, a Tailwind arbitrary value with a v4@themeblock, or Stylus. Press Copy code to take the box shadow CSS, or Share link to copy a URL that reopens this exact shadow.
I built the first version of this tool in 2025 as a page on 365i, the hosting company I have run since 2002, because I kept hand-typing the same layered shadows into client stylesheets. It was drawing about 3,000 search impressions every six weeks on "box shadow generator" queries before it was retired with that site's redesign. This is the rebuild, on its own domain, with everything the old one lacked: layers you can reorder, the whole state in the URL, a dark canvas that is a choice rather than a theme, and full keyboard control.
Multiple box shadows, layered for depth
CSS lets one element carry a comma separated list of shadows, and the first in the list paints on top. Real shadows have a crisp contact edge and a soft, wide fall-off at the same time, which a single blur cannot produce. The pattern that works is three or four layers whose vertical offset and blur roughly double each step, each at low opacity, tinted toward the surface rather than pure black. The layered soft shadow example gives the exact ratios, and the layered shadows guide explains why they work.
Tailwind, SCSS and Stylus box shadow output
Every project wants the value in a different shape. Tailwind takes it as shadow-[...] with underscores for spaces, or as a named --shadow-* token in a v4 @theme block. Sass projects want an SCSS box shadow variable. Stylus drops the colons and braces. The output formats guide shows where each one goes in a real codebase.
Inset box shadows and the dark canvas
Flip the Inset switch and the same shadow is drawn inside the box: the basis of wells, pressed buttons and the frosted edge on a glass card. Switch the canvas to Dark, a colour or an image to check that a shadow still reads where it will actually live, because a shadow tuned on white often vanishes on a photograph. The box shadow examples gallery has a page for each of these, with a screenshot, the code in all four formats and a link that opens it here.
Frequently asked questions
What is a CSS box shadow generator?
A box shadow generator is a visual editor for the CSS box-shadow property. Instead of typing offset, blur, spread and colour values by hand and reloading, you drag the shadow and move sliders while a preview updates live, then copy the finished code. This one also stacks multiple shadow layers, switches between light, dark, coloured and image canvases, and writes the result as CSS, SCSS, Tailwind or Stylus.
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour. A positive X moves the shadow right, a positive Y moves it down. Blur softens the edge (the shadow fades over roughly twice the blur value). Spread grows or shrinks the shadow before blurring. Add the inset keyword and the same shadow is drawn inside the box instead of outside it. The docs page on how box-shadow works walks through each with diagrams.
How do I make a box shadow look realistic?
Use more than one layer. A single shadow reads as a sticker because real shadows have a crisp contact edge and a soft, wide fall-off at the same time. Stack three or four layers whose vertical offset and blur roughly double each step, keep the opacity of each low, and tint the colour toward the surface it falls on rather than pure black. The Layered soft shadow example shows the exact ratios.
Can I use multiple box shadows on one element?
Yes. CSS box-shadow takes a comma separated list, and the first shadow in the list is painted on top. Add layers with the plus button, reorder them with the arrows, and the generator writes the list for you in every output format. Up to twelve layers are supported here, which is more than any real design needs.
How do I get a Tailwind box shadow from the generator?
Open the Tailwind tab in the readout. The first line is an arbitrary value class, shadow-[...], that works in any Tailwind project with no configuration, spaces replaced by underscores. Below it is a Tailwind v4 @theme block that names the shadow once so you can use a short class like shadow-custom throughout a project.
Is the box shadow generator free?
Yes, completely. There is no sign-up, no watermark and no limit on use. Saved presets live in your own browser storage, and the export button gives you a JSON file so you can keep them or move them to another machine.
Which browsers support CSS box-shadow?
All of them. Unprefixed box-shadow has worked in every major browser since 2012, including Chrome, Firefox, Safari, Edge and mobile browsers, so the vendor prefixed versions are no longer needed. The one thing to check in older engines is colour syntax: rgba() works everywhere, while newer forms like rgb(0 0 0 / 20%) need a 2020 or later browser.