What the CSS Box Shadow Generator does
This box shadow generator lets you stack several shadow layers - each with its own offset, blur, spread, colour, opacity and inset setting - and see them at once on a light and a dark background, then copy the box-shadow declaration or the closest filter: drop-shadow() version for icons and transparent images.
Layered shadows are how most design systems draw elevation: a tight, dark shadow for the contact edge plus a wide, faint one for ambient light. Building them by hand means juggling comma-separated lists; here each layer is a row you can reorder, and the CSS is rewritten as you type. Everything runs in your browser.
How to use it
- Start from a preset (layered elevation, soft card, inset field or coloured glow), or edit the layer that is already there.
- Set the X and Y offsets to move a layer, blur to soften its edge, and spread to grow it (positive) or shrink it (negative) before it is blurred.
- Pick a colour and an opacity. Low opacities on several layers usually look more natural than one dark shadow.
- Tick Inset for a shadow inside the box, which is how pressed buttons and input fields are often drawn.
- Check both backgrounds: a shadow that works on white can vanish on a dark theme. Then copy the box-shadow, or the drop-shadow filter for a shape with transparent areas.
Reading the results
The first layer in the list is painted on top. Order matters when layers overlap, especially with inset shadows and spread rings.
The drop-shadow version follows the visible pixels of an element - the outline of an icon or a transparent PNG - rather than its rectangular box. The notes list everything that could not be carried across, such as spread or inset layers.
Colours are written as hex when fully opaque and rgba() otherwise, which every browser in use understands.
Worked example: the soft card preset, read value by value
The soft card preset produces box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);.
Reading left to right: no horizontal offset; the shadow moves 10px down; it is blurred over 30px; and it is first shrunk by 12px on every side. Shrinking before blurring keeps the shadow from showing along the top and sides, so it appears only below the card - the effect of a light source above.
The blur radius of 30px corresponds to a Gaussian blur with a standard deviation of 15px, half the blur value, as the CSS Backgrounds specification defines. The drop-shadow version is drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25)), which has no spread, so its shadow is 12px larger all round and does show at the sides.
box-shadow or filter: drop-shadow()?
box-shadow draws around the element's border box, respecting its border-radius. It is cheap to render, supports several layers, spread and inset, and is right for cards, buttons and panels.
filter: drop-shadow() works on the element's rendered pixels, so a transparent PNG, an SVG icon or a speech-bubble shape gets a shadow that follows its outline. It cannot spread or be inset, and chaining several drop-shadows also shadows the earlier shadows, which darkens the result.
Shadows in dark themes
On a near-black background a black shadow has almost nothing to darken, so elevation disappears. Common fixes are a lighter surface colour for raised elements, a subtle 1px light border, or a coloured glow. Use the dark preview to see which layers still do any work.
Limitations: what the result does not prove
- Each value is written in px. If you need shadows to scale with text size, convert the offsets to em by dividing by the font size.
- The preview shows how your browser draws the shadow. Rendering is consistent across modern browsers, but very large blurs on many elements can slow scrolling on low-end phones.
- The drop-shadow equivalent is an approximation whenever a layer has spread, is inset, or there are several layers; the notes say which.
- A shadow is decoration. It should not be the only thing that separates an interactive control from its background for people who cannot see subtle contrast.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Backgrounds and Borders Module Level 3 - checked 19 Sep 2026
- W3C - CSS Backgrounds and Borders Level 3: box-shadow
- W3C - Filter Effects Module Level 1: drop-shadow()
- MDN - box-shadow
Frequently asked questions
What does the spread value do in box-shadow?
Spread grows the shadow shape outward (positive) or shrinks it inward (negative) before the blur is applied. A negative spread with a downward offset hides the shadow at the top and sides, so it only appears below the element, which reads as a soft lift.
How do I put several shadows on one element?
List them separated by commas in one box-shadow declaration. The first one in the list is drawn on top. This generator keeps each layer as its own row, so you can add, remove and reorder them without editing a long comma-separated line by hand.
Why does my shadow disappear on a dark background?
A black shadow has little to darken when the page is already nearly black. Try a lighter surface colour for raised elements, a thin light border, or a faint coloured glow instead. The dark preview panel here shows exactly what survives.
When should I use drop-shadow instead of box-shadow?
Use drop-shadow() for images and icons with transparent areas, because it follows the visible outline. Use box-shadow for rectangular or rounded boxes, because it supports spread, inset and multiple independent layers and is usually cheaper to draw.
Is the blur value a radius or a standard deviation?
In CSS it is a blur length, and the specification says the result should approximate a Gaussian blur with a standard deviation equal to half that length. A 20px blur therefore means a standard deviation of about 10px.
Can an inset shadow and an outer shadow be combined?
Yes. Put both in the same box-shadow list: tick Inset on one layer and leave it off on another. A common pattern is an inset highlight at the top edge plus a soft outer shadow for elevation.
Last reviewed by the A2Z.Tools team against the sources listed above.
