CSS Box Shadow Generator – Create Multi-Layer Shadows
About the CSS Box Shadow Generator
The CSS Box Shadow Generator builds single or stacked box shadows visually and writes the CSS as you adjust them. Each layer gets its own offset, blur, spread, color, and opacity, and you can stack as many as you need, preview them against different background colors, or start from one of 30 presets.
Shadows in an interface do one job: they tell the eye how far an element sits above the surface behind it. That is why a dropdown menu, a modal dialog, and a resting card all need different shadows rather than the same one at different strengths. A card sitting close to the page needs a tight, subtle shadow; a modal floating above everything needs a large, diffuse one. Getting this hierarchy consistent across a design is most of what separates an interface that feels considered from one that feels flat.
The single most useful technique here is layering. A real object casts a complex shadow: a dark, tight core where it nearly touches the surface, and a wide, faint penumbra spreading outward. One CSS shadow value cannot do both, which is why single-layer shadows so often read as a grey smudge. Stacking two or three layers — a small offset with low blur and higher opacity, plus a larger offset with heavy blur and low opacity — produces the depth that every mature design system uses.
Color is the other thing worth getting right. Pure black at low opacity is the default instinct, and it consistently makes interfaces look slightly dirty, because a real shadow takes on the hue of the surface it falls across. Tinting the shadow toward your background color — a deep navy on a blue-tinted page, a warm brown on a cream one — is a small change with a disproportionate effect on how polished the result looks.
Everyone who works on BigToolSite’s CSS tools tested every layer combination, the inset toggle, and all 30 presets against the live preview, confirming that stacked shadow values render in the correct order and that per-layer opacity carries through accurately into the generated code.
To tint a shadow toward the exact color of your page background rather than guessing, the Image Color Picker gives you the precise value to work from.
Shadows and backgrounds are usually designed together, and the CSS Gradient Generator handles the surface the shadow falls on.
Multi-layer shadow declarations get long quickly, so the CSS Minifier is worth running over the finished stylesheet before you deploy.
How to Use the CSS Box Shadow Generator
- Adjust the first layer’s X and Y offsets to set the shadow’s direction. Most interfaces use zero horizontal offset and a positive vertical one, which mimics light coming from above.
- Set the blur to control softness. Larger blur reads as greater distance from the surface.
- Use spread to grow or shrink the shadow before blurring. Negative values pull it in, which is useful for tightening a shadow that spills too far.
- Pick a color and opacity. Start around 10% to 25% and tint the color toward your background rather than using pure black.
- Click + Add Shadow Layer to stack another shadow. Combining a tight, darker layer with a wide, faint one creates realistic depth.
- Toggle Inset Shadow on any layer to render it inside the element instead of outside, producing a pressed or recessed look.
- Try a preset as a starting point, then adjust from there rather than building from zero.
- Change the preview background to check the shadow against light, dark, and colored surfaces. Shadows that look right on white often disappear on dark backgrounds.
- Choose CSS or SCSS syntax, then click Copy Code.
Example Usage
Input: X: 0px, Y: 10px, Blur: 15px, Spread: 0px, Color: #000000, Opacity: 10%
Output:
.shadow-box {
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
}
That single layer is a reasonable resting state for a card. To make it read as a real elevation, add a second, tighter layer beneath it:
.shadow-box {
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10),
0px 4px 6px 0px rgba(0, 0, 0, 0.05);
}
Layers are painted in the order they are written, with the first sitting on top. Putting the tighter, darker shadow after the wide, soft one is the conventional order and the one the Card and Modal presets follow.
For a hover effect, generate two shadows and swap between them in CSS. Increasing the Y offset and blur on hover makes the element appear to lift toward the cursor. Add a transition on the box-shadow property so the change is animated rather than abrupt.
For an inset shadow, turn the toggle on and use a small offset with moderate blur. This is how input fields, wells, and toggle switches get their recessed appearance, and it usually wants lower opacity than an outer shadow at the same size.
Frequently Asked Questions
Two or more shadow values applied to the same element, separated by commas. Combining a tight darker shadow with a wide faint one imitates how real objects cast shadows and looks far more convincing than a single layer.
It grows or shrinks the shadow before the blur is applied. A positive value makes it larger than the element, a negative value pulls it inward, which is useful when a shadow spills further than you want.
It renders the shadow inside the element’s borders instead of outside, creating a pressed-in or recessed appearance. Input fields and toggle switches commonly use it.
Usually because it is pure black at low opacity. Real shadows pick up the color of the surface beneath them, so tinting toward a dark version of your background color reads as much cleaner.
The first value in the list sits on top, and each subsequent one renders behind it. Convention places the wide soft layer first and the tight dark layer after.
Define a larger shadow on the hover state and add a transition on the box-shadow property so it animates. Increasing the Y offset alongside the blur makes the element seem to lift.
Large blur radii on many elements can cost paint time, particularly on mobile, and animating box-shadow directly is more expensive than animating transform or opacity. For heavy animation, layering a pseudo-element and fading its opacity performs better.
box-shadow follows the element’s rectangular box and its border radius. The drop-shadow filter follows the actual shape of the content, including transparency, which is what you need for a shadow around a non-rectangular PNG or SVG.
Yes. The preview background controls let you test against white, black, grey, colored, and gradient surfaces before copying. Shadows tuned on white frequently vanish on dark backgrounds.
Yes. Switch the Syntax option to SCSS and the shadow value is emitted as a variable alongside the class, ready to reuse across a design system.
Use a large negative spread with an offset in the direction you want. The negative spread shrinks the shadow enough that it only escapes from the side the offset pushes it toward.
