CSS Box Shadow Generator
Build layered box shadows visually and copy the CSS
The CSS Box Shadow Generator builds box-shadow values visually instead of by hand. You stack as many shadow layers as you need, tune each one with sliders or exact numbers, watch the result on a live preview box, and copy a production-ready declaration. Because shadows are one of the fastest ways to add depth to a card, button, or modal, getting the offsets and opacity right matters more than the color. This tool keeps the geometry, the color, and the layer order in one place.
Building a Shadow Layer by Layer
- Start with the default layer and adjust its geometry. Every new layer begins as
0px 4px 6px 0px rgba(0, 0, 0, 0.15). - Set the offsets. Drag the sliders or type into the number boxes for Offset X, Offset Y, Blur, and Spread. The slider and number input stay in sync.
- Choose a color and opacity. Pick the shadow color, then separate opacity from color with the opacity slider so you can keep the same hue and change only the transparency.
- Toggle inset for a layer when you want an inner shadow rather than a drop shadow.
- Add or duplicate layers to build a realistic multi-layer shadow, and remove any you do not want.
- Copy the CSS. The output panel shows the finished
box-shadow: ...;declaration. The preview background color is only a preview aid and is not part of the output.
Offset, Blur, Spread: What Each One Does
| Control | Range | Effect |
|---|---|---|
| Offset X | -50 to 50 | Moves the shadow left (negative) or right (positive) in pixels. |
| Offset Y | -50 to 50 | Moves the shadow up (negative) or down (positive). Positive values read as light from above. |
| Blur | 0 to 100 | Softens the edge; 0 produces a hard copy, larger values feather it out. |
| Spread | -50 to 50 | Grows the shadow outward (positive) or shrinks it inward (negative) before blurring. |
| Opacity | 0 to 1 | Sets the alpha channel; below 1 the color is emitted as rgba. |
| Inset | on/off | Draws the shadow inside the border box instead of outside. |
A shadow with blur 0 and spread 0 is just a solid offset copy of the element’s box. Blur softens its edge, and spread changes the size of the shape being blurred.
Worked Examples: Material-Style Elevation
The classic low-elevation look is two layers, both with a small downward offset and a tight blur:
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
The first layer is the wider ambient one, the second is the sharper contact shadow. For a floating panel, push the offset and blur further out:
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);
A soft neumorphic surface uses two inset layers with opposite vertical offsets, one dark and one light, so the element looks pressed into the page:
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 4px 0px rgba(255, 255, 255, 0.6);
Inset Shadows
An inset shadow is painted inside the element’s border box, under the border but above the background, which makes the surface look recessed. Common uses are pressed buttons, text inputs with an inner lip, and neumorphic cards. Because the shadow is clipped to the element, a large blur with a small spread produces a soft vignette around the interior edge, while a zero blur gives a hard internal line. Inset shadows respect border-radius just like drop shadows, so rounded inputs keep their curve.
Accuracy Notes
- Hex input is normalized. A three-digit shorthand such as
#abcexpands to#aabbcc, and an unparseable value falls back to#000000. - Opacity 1 switches to hex. At full opacity the output is a hex color; below 1 it is
rgba(...)rounded to two decimals. - All lengths are pixels. The generator does not emit percentages, ems, or rems.
- No vendor prefixes. Modern browsers do not require
-webkit-box-shadow, so the output is the standard property only. - The preview is a fixed-size white box. It will not show how the shadow interacts with your actual element’s background or border, so paste the declaration into your real layout to judge it.
Common Mistakes
- Cranking opacity toward 1. High-alpha shadows look like hard rectangles; realistic depth usually lives between 0.1 and 0.3.
- Confusing blur with spread. Blur softens the edge; spread changes the size. Increasing blur when you meant “bigger” makes a fuzzy shadow instead of a larger one.
- Forgetting ancestor clipping. A parent with
overflow: hiddencan cut off a shadow that extends beyond its box. - Expecting shadows on inline elements to behave. Non-replaced inline elements fragment across lines, so give the element
display: inline-blockorblockfor a normal shadow. - Stacking many heavy, blurred layers. Each large blur is expensive to repaint, which can hurt scrolling performance on low-end devices.
Related Tools
- CSS Text Shadow Generator — Build matching shadows for text.
- Color Picker — Find and convert the perfect shadow color.
- CSS Gradient Generator — Pair your shadows with custom CSS gradients.
- Color Contrast Checker — Verify text stays readable on your chosen background.
Frequently Asked Questions
Why does the generated CSS always show four lengths, even when spread is zero?
The generator emits the full box-shadow length form every time: horizontal offset, vertical offset, blur, and spread, in that order, followed by the color. So a default layer becomes 0px 4px 6px 0px rgba(0, 0, 0, 0.15). The trailing 0px is the spread, and writing it explicitly keeps the output predictable and easy to tweak by hand.
Does the order of layers change which shadow appears on top?
Yes. CSS paints box-shadow layers back to front, which means the first shadow in the comma-separated list is drawn on top of the later ones. If a small, dark contact shadow should sit above a wide, soft ambient shadow, list the small one first. The tool appends new layers to the end and has no reorder handle, but you can reorder the comma-separated entries after pasting.
Why is my color written as rgba sometimes and hex other times?
When the layer opacity is below 1, the color is converted to rgba() so the alpha can be expressed, for example #000000 at 15 percent becomes rgba(0, 0, 0, 0.15). At exactly 100 percent opacity the tool outputs the plain hex value instead, such as #000000, because no alpha channel is needed.
Can I create an inner shadow that only appears on one side?
Yes, indirectly. Turn on inset for a layer and give it a blur of 0 plus a positive offset in the direction you want the edge. A spread that is negative on an inset layer pulls the shadow in from the border, which is often how a thin top edge or a pressed-in lip is built. Combining two inset layers with opposite offsets gives a symmetrical recessed look.
What is a realistic shadow for a card or modal?
Low opacity is the key. A typical card uses two layers: a tight one such as 0px 1px 3px 0px rgba(0, 0, 0, 0.12) for contact and a slightly larger one such as 0px 1px 2px 0px rgba(0, 0, 0, 0.24) for softness. For a floating modal, increase the vertical offset and blur, for example 0px 10px 25px 0px rgba(0, 0, 0, 0.15), and keep the alpha well under 0.3.
Does box-shadow affect the layout or the clickable area of an element?
No. A box-shadow is purely paint; it does not take up space, push neighbors, or extend the element's hit area. A large blurred shadow can visually overlap nearby content, but clicks pass through it to whatever is underneath. That is why shadows are safe to add for depth without reflowing the page.
Reviewed by the HandyTools Hub team · Last updated