About the Box Shadow Generator
The Box Shadow Generator lets you design a CSS box-shadow by moving sliders instead of guessing numbers. Set the offset, blur, spread, color and opacity, watch the preview card update, and copy the finished CSS.
Shadows give buttons, cards, menus and dialogs depth, so people can tell what sits on top and what they can click. Good shadows are subtle and often made of more than one layer: a tight, darker shadow close to the element and a wide, soft one further out. This tool makes it easy to stack up to eight layers and see how they combine.
Seven presets cover common styles, from a soft card shadow to a hard offset shadow, an inner shadow and a colored glow. You can preview on any box and background color and in three shapes. Everything runs in your browser.
How to use it
- Start from a presetOpen Presets and choose Soft, Card, Raised, Sharp, Layered, Inset or Glow. The tool starts with Raised.
- Adjust each layerMove Horizontal and Vertical to shift the shadow, Blur to soften it and Spread to grow or shrink it. Set the color and its opacity at the bottom of the layer.
- Add or remove layersAdd layer appends a soft shadow, up to eight. The × button removes a layer. Check Inset to put a layer inside the box.
- Preview it in contextChange the box color, the background and the shape (square, rounded or circle) to match where the shadow will be used.
- Copy the CSSClick Copy CSS and paste the box-shadow line into the rule for your element.
Key features
Every box-shadow setting
Horizontal and vertical offset from -100 to 100 pixels, blur up to 150, spread from -50 to 50, color, opacity and inset.
Up to eight layers
Stack shadows for realistic depth. They are written in order, and the first layer is drawn on top.
Seven presets
Soft, Card, Raised, Sharp, Layered, Inset and Glow, each a starting point you can tweak.
Clean color output
Fully opaque colors are written as HEX, and anything with opacity as rgba(), which every browser understands.
Realistic preview
Choose the box and background colors and a square, rounded or circular shape. These only affect the preview, not the CSS.
Private by design
No sign-up and nothing to upload. The shadow CSS is written by your browser.
Examples
The starting shadow
The Raised preset, which the tool opens with, has two layers:
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.19),
0px 6px 6px 0px rgba(0, 0, 0, 0.23);The four numbers in each layer are the horizontal offset, the vertical offset, the blur and the spread. The first layer is large and faint, the second small and a little darker. Together they look like a card lifted off the page by a light from above.
The presets
| Preset | CSS |
|---|---|
| Soft | 0px 8px 24px 0px rgba(0, 0, 0, 0.12) |
| Sharp | 6px 6px 0px 0px #14161f |
| Inset | inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2) |
| Glow | 0px 0px 24px 4px rgba(43, 89, 255, 0.55) |
Sharp has no blur, so it draws a solid offset copy of the box, a popular "brutalist" look. Glow has no offset and a positive spread, so the color spreads evenly on all sides. Card and Layered are multi-layer shadows; Layered stacks five layers that double each time:
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08),
0px 2px 2px 0px rgba(0, 0, 0, 0.08),
0px 4px 4px 0px rgba(0, 0, 0, 0.08),
0px 8px 8px 0px rgba(0, 0, 0, 0.08),
0px 16px 16px 0px rgba(0, 0, 0, 0.08);Editing a layer
Start from Soft, move Horizontal to -4, Spread to -2 and the opacity to 100%:
box-shadow: -4px 8px 24px -2px #000000;A negative horizontal offset moves the shadow to the left, as if the light came from the right. A negative spread shrinks the shadow before it is blurred, which keeps it from peeking out at the sides. At 100% opacity the color is written as a plain HEX code.
Remove every layer and the CSS becomes box-shadow: none;, which is handy for switching a shadow off in a hover or dark mode rule.
Tips
- Keep shadow opacity low, often between 8% and 25%. Real shadows are soft, and dark, heavy shadows make a design look dated.
- Use the same light direction everywhere on a page. If one card casts its shadow down and another to the right, the page feels off.
- Make shadows bigger for elements that sit higher: a small shadow for cards, a larger one for menus and the largest for dialogs.
- On dark backgrounds, black shadows barely show. Use a lighter border, a subtle glow or a lighter surface color instead to show depth.
- Tint shadows with the background color instead of pure black, for example a dark blue on a blue page. The result looks more natural.
Common mistakes and limits
- Using one big, dark shadowA single strong shadow looks heavy. Two or three soft layers with low opacity look more natural.
- Expecting the box and background colors in the CSSThey only set up the preview. Your element's own background color comes from your stylesheet.
- Confusing blur and spreadBlur softens the edge. Spread makes the shadow larger or smaller before it is blurred, and can be negative.
- Shadows that get cut offA parent with overflow: hidden clips the shadow. Add padding to the parent or move the shadow to an inner element.
- Animating box-shadow directlyChanging box-shadow on hover can make scrolling stutter on slow phones. Fading in a pseudo-element that holds the larger shadow is smoother.