CSS Box Shadow Generator

A box-shadow editor where you drag the light and stack layers

The CSS Box Shadow Generator lets you tune box-shadow values while you watch the result. Drag the light on the stage and the shadows of all layers swing together to the opposite side; drag the shadow handle and only the selected layer moves. You can stack up to 12 layers, and layer 1 in the list is drawn on top. The guides draw the shadow edge and the blur band of the selected layer, and a yellow dashed line shows how far all shadows reach outside the box, with the four distances written out.

The first screen shows a smooth shadow split into four layers, with offset and blur doubling at each step. Pick a starting point from the 24 examples, change the background, shape and size to match the screen you will actually use, and copy the result as CSS. If you need a shadow that follows the outline of a transparent PNG or SVG icon, switch the drawing method to drop-shadow. You then get filter code whose blur value has been rewritten so that it looks the same.

When to use it

A shadow tells the eye what floats above the page and what is pressed into it. The same values look completely different on different backgrounds and shapes, so it is faster to try them on something close to the real use before you write any code.

• Making a card, modal or dropdown float: several faint layers look less muddy than one dark shadow. Start from the Smooth 4 or Wide 6 example and set the height with Smaller / Larger for all layers.
• Making an input or a pressed button look sunken: use an inset shadow (inset). The Input example combines an inset shadow at the top with a 1px inner line.
• Building a focus ring or a selected state: a shadow with spread and no blur looks like a border that does not push the layout. In forced-colors modes such as Windows High Contrast, though, box-shadow is switched off, so pair a focus indicator with outline.
• Adding a shadow to a transparent icon or logo: box-shadow draws a shadow in the shape of the box. If the shadow has to follow the artwork, choose drop-shadow.
• Checking on a dark or colored background: a black shadow tuned on a light screen almost disappears on a dark one. Switch the background and check that the shadow is really visible.

How to use it

1. Pick a starting point. Click one of the 24 examples below and the layers, background and shape change together. You can narrow the list with the groups (Basic, Layered, Inset, Color/light, Styles).
2. Drag the light. Drag the sun handle around the circle on the stage and every layer's offset turns by the same angle. With the keyboard, the arrow keys turn it 1° and Shift turns it 15° at a time.
3. Refine the layers. Select a layer in the list and change X offset, Y offset, blur, spread, color and opacity with the sliders or the fields. Dragging the cross handle on the stage changes the X and Y offsets of the selected layer together. A single-layer shadow can become soft layers with "Split into 4".
4. Match the real screen. Set the shape (card, button, circle, input, square, transparent icon), the size, the background and the element color to resemble your page. The numbers on the yellow dashed line tell you how far the shadow spreads outside the box.
5. Copy. "Copy CSS" takes the code, and "Copy link" saves the current state as an address. The address holds the layers, background, element color, shape, size and drawing method, and it is not changed when the page is first opened.

What the five values do

One shadow layer is written as [inset] X Y blur spread color. You can give two to four lengths, and a missing length is read as 0. That is why this tool drops blur and spread when they are 0 and writes something like 6px 6px #0F172A.

• X and Y offsets: positive values move the shadow right and down, negative values move it left and up. If the light comes from the top left, the shadow goes to the bottom right.
• Blur: at 0 the edge is razor sharp, and the larger the value, the wider the edge spreads out. Negative values are not allowed.
• Spread: positive values grow the shadow in every direction and negative values shrink it. In an inset shadow the shadow grows toward the inside of the border, so a larger positive value covers more area.
• Color: at 100% opacity the tool writes HEX, and below that it writes rgba(). If you leave the color out, the text color (currentColor) is used, so this tool always writes a color.
• inset: instead of a shadow cast by a box lifted off the background, the shadow is drawn as if the background were casting it into the box.

The blur value is twice the standard deviation

The CSS specification says to approximate blur with a Gaussian blur whose standard deviation is half the blur value, and each pixel must match that result within 5%. On a straight edge the shadow therefore fades from the shadow edge, by the blur value inward and by the blur value outward, over a total width of twice the blur. Right at the shadow edge the intensity is 50% of the original, and one blur value outside it drops to 2.3%. This is why the tool calculates the "outer margin" as spread + blur ± offset.

When we measured the cross-section of a 16px blur shadow in Chromium 151, it matched the ratios in the table within 2.2 percentage points. As you increase the blur, the darkest part of the shadow begins one blur value inside the edge, so a large blur on a small element leaves almost no dark core.

Spread and rounded corners

Spread pushes the straight sides of the shadow edge outward by that amount. Width and height never go below 0. The spread is also added to the corner radius, but when the radius is smaller than the spread, the amount added is reduced so that rounded and square corners do not meet abruptly. With radius r and growth e, the amount added is e × (1 + (r ÷ e − 1)³). For an inset shadow, the growth is the size of the negative spread.

The dashed outline of the guides on the stage follows this rule. The "Bottom only" example, whose spread is negative (0 10px 8px -8px), shrinks the shadow to be smaller than the box and then moves it down, so almost no shadow shows above or beside the box.

Several layers: order and soft shadows

You can write several shadows separated by commas. The first shadow in the list is drawn on top and the rest are painted behind it in order. With layers of the same color the order is barely visible, but when you overlap spread rings of different colors, as in the rainbow ring, the smaller ring has to come first for every color to show.

Ahlin (2019) showed that stacking faint shadows whose offset and blur double, such as 1, 2, 4 and 8px, handles the edges more naturally than a single shadow. In the table below, "Overlap intensity" is the intensity of the central area where all layers overlap, calculated as 1 − (1 − a₁)(1 − a₂)….

"Split into 4" creates four layers from the selected layer's offset, blur and spread, divided by 1/8, 1/4, 1/2 and 1. The opacity of each layer is set to 1 − (1 − a)^(1/4) so that the overlap intensity stays the same as the original. For example, splitting 0 8px 8px at 48% opacity turns 0 1px 1px, 0 2px 2px, 0 4px 4px and 0 8px 8px into 15% layers each, which equals the Smooth 4 example. Once you have more layers, adjust them all at once with Smaller / Larger (×0.8, ×1.25) and Lighter / Darker for all layers.

Inset shadows

An inset shadow treats everything outside the padding box as opaque and draws that shadow inside the box. It never goes outside the padding box, and it is painted just above the element's background and below its border. So on an element with a border, the shadow starts from the inside of the border.

• Inputs and pressed buttons: a faint inset shadow at the top (inset 0 2px 4px) makes the field look lower than its surroundings.
• Inner line: inset 0 0 0 2px works like a border that does not change the size, so marking a selected card does not shake the layout.
• Concave surface: on an element with the same color as the background, a dark inset shadow and a light inset shadow in opposite directions make the surface look dished.

For example, turn on inset and enter X 12px, Y 8px, blur 18px, spread −2px, color #336699 and opacity 35%, and you get inset 12px 8px 18px -2px rgba(51, 102, 153, 0.35). An inset shadow never spreads outside the box, so it is not part of the outer margin.

box-shadow versus filter: drop-shadow()

box-shadow makes a shadow in the shape of the element's border box, while drop-shadow() follows the transparency of what has been drawn. Switch to the transparent icon shape and move between the two methods, and the difference shows right away.

The Filter Effects specification defines the third value of drop-shadow() as a standard deviation, not a blur radius. In Chromium 151 we confirmed that the cross-sections of drop-shadow(… 10px) and box-shadow … 20px are drawn the same, and this tool also writes half the blur value when it converts to drop-shadow. Layers with spread are written without it, inset shadows are left out, and a notice below the code says so. When several drop-shadows are chained, each later shadow also casts a shadow of the earlier ones, so the result is darker and wider than the same values in several box-shadow layers.

Shadows take up no space

Shadows do not affect layout and can overlap other boxes or text. They do not create scrolling either, so a shadow never makes the page wider. Instead, a shadow is clipped when the parent has overflow: hidden or when the card sits against the edge of a scroll box.

To keep it from being clipped, leave room for each outer shadow equal to spread + blur, minus or plus the offset in that direction. The Soft example (0 4px 12px) needs 8px at the top, 12px on the right, 16px at the bottom and 12px on the left. The yellow dashed line on the stage and the sentence below the CSS show these values for the current shadow.

Dark and colored backgrounds

A shadow works by darkening the background, so when the background is already dark it is barely visible. The table below gives the color under a 20% black shadow and the luminance contrast between that color and the background.

The same shadow reads at 1.61:1 on white but almost vanishes at 1.05:1 on #0F172A. On a dark screen, rather than making the shadow darker, it works better to make the element's face lighter than the background, or to add a light inset line along the top to suggest height. On a colored background a gray shadow can look dull, so consider a shadow from the same color family, as in the Colored example.

When you animate a shadow

Shadows animate by blending their computed values. When the two lists differ in length, the shorter one is padded at the end with transparent 0 0 0 0 shadows, but if shadows in the same position differ in whether they are inset, they cannot be blended and the value changes at once. To make a card rise on hover, it is safest to give the before and after shadows the same number of layers in the same inset order. The stage in this tool follows the same rule when you switch examples: it blends smoothly even when the number of layers differs, but jumps at once when a shadow in the same position switches between inset and outer. If reduced motion is turned on in the device, the stage transition is switched off.

Browser support

The numbers are the first version that includes the feature, taken from the MDN browser compatibility data. The values for drop-shadow() in Chrome 18 and Safari 6 date from the time it was used as -webkit-filter; current browsers need no prefix.

Common mistakes

• Using box-shadow on a transparent PNG: you get a rectangular shadow, not the shape of the icon. Use drop-shadow.
• Copying the box-shadow blur straight into drop-shadow: the third value means something different, so the shadow comes out twice as blurry. Write half.
• Forgetting the parent's overflow: hidden: the card's shadow is clipped. Leave inner padding equal to the outer margin.
• A shadow close to 100% black: the screen looks heavy and dirty. Raise the blur and lower the opacity, or split it into layers.
• A large positive spread: when the spread is larger than the blur, the shadow looks like a border. Adjust spread in small steps.
• Reusing a light-screen shadow on a dark screen: the contrast falls to 1.05:1 and the height disappears.
• Thinking the first shadow is at the bottom: the first shadow in the list is on top.

Limits and cautions

• The specification does not fix the exact blur method; matching a Gaussian blur within 5% is enough. Edge intensity can differ slightly between browsers.
• The preview is drawn with real CSS by the browser you are using. Check how it looks in other browsers in those browsers.
• Only px lengths are accepted, with up to one decimal place. X and Y go up to ±300px, blur from 0 to 300px, and spread up to ±150px. The sliders move over a narrower range than that, while the fields accept the whole range.
• When you turn the light or press Smaller / Larger, values are rounded to 0.1px. After many repetitions they can drift a little from the starting values.
• The opacities for "Overlap intensity" and "Split into 4" are calculated on the assumption that the layers have the same color. They do not apply to layers of different colors.
• The outer margin treats the area up to the blur radius as the reach of the shadow. A very faint shadow of 2.3% intensity or less still remains beyond it. drop-shadow is calculated from the box, so for a shape smaller than the box, such as an icon, it comes out wider than the real one.
• The MDN compatibility data keeps a note that outer shadows create scrollbars in Chrome, Firefox and Safari. They did not appear in Chromium 151, but we did not test Firefox or Safari.
• In forced-colors mode box-shadow becomes none. Information that you convey only with a shadow (focus, selection, dividers) should also be shown with a border or outline.

Reference date The CSS specifications, the MDN compatibility data, Ahlin (2019) and the Material Components values were checked against the originals on 2026-10-21. The intensities, corner radii and contrasts in the tables were calculated directly with this tool's calculation core, and the drop-shadow blur and the scrolling behavior are results measured in Chromium 151.

Sources

• 01W3C: CSS Backgrounds and Borders Module Level 3 — box-shadowCandidate Recommendation Draft 2024-03-11. §6.1 meaning of the values, missing lengths read as 0, default color currentColor; §6.1.1 shadow shape and the spread corner formula; §6.1.2 standard deviation = blur ÷ 2 and the 5% tolerance; §6.1.3 first shadow on top, no effect on layout or scrolling, animation by blending computed values
• 02W3C: Filter Effects Module Level 1 — drop-shadow()Working Draft 2018-12-18. The third length is a standard deviation, not a blur radius; spread and multiple shadows are not accepted
• 03W3C: CSS Color Adjustment Module Level 1Candidate Recommendation Snapshot 2025-12-16. §3.1 in forced-colors mode, box-shadow and text-shadow compute to none
• 04MDN: box-shadowBrowser compatibility table: unprefixed in Chrome 10, Edge 12, Firefox 4 and Safari 5.1; a note about scrollbars from outer shadows
• 05MDN: drop-shadow()Browser compatibility table: Chrome 18, Edge 12, Firefox 35, Safari 6
• 06MDN: filterBrowser compatibility table: unprefixed in Chrome 53, Edge 12, Firefox 35 and Safari 9.1; -webkit-filter before that
• 07Tobias Ahlin: Smoother & sharper shadows with layered box-shadows2019-09-19. Examples of 4, 5 and 6 layers with doubling offset and blur, and the opacities (the values behind the Smooth 4, Sharp 5, Wide 6 and Dreamy 6 examples)
• 08Material Components for the web: _elevation-theme.scssThe umbra, penumbra and ambient values of elevation 2 with opacities 0.2, 0.14 and 0.12 (the Material 2 example)

Frequently asked questions

Related tools