CSS design
How to generate CSS box shadow
A box shadow is built from horizontal offset, vertical offset, blur, spread, and color. Adjust each value deliberately to create depth without making the interface look muddy.
Open the CSS box shadow generatorRead the box-shadow syntax
box-shadow: x-offset y-offset blur spread color;
For example, box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16); places a soft shadow below an element. The first two lengths are required. Blur and spread are optional, but writing all four makes the declaration easier to tune.
| Value | Effect |
|---|---|
| Horizontal offset | Positive moves right; negative moves left |
| Vertical offset | Positive moves down; negative moves up |
| Blur radius | Higher values soften and enlarge the edge |
| Spread radius | Positive expands; negative contracts the shadow |
| Color | Controls hue and opacity |
Build a subtle elevation shadow
- Start with horizontal offset at 0 so the shadow stays centred.
- Use a small positive vertical offset, such as 4px or 8px.
- Increase blur until the edge no longer looks like a second border.
- Keep opacity low. Neutral black at 10% to 20% is often enough on white.
- Add a small negative spread if the shadow feels too large near the element.
Preview the shadow against the actual page background. The same declaration can look much stronger on white than on gray.
Use inset for an inner shadow
Add inset to draw the shadow inside the element:
box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
Inset shadows can suggest a pressed control or recessed surface. They should not be the only signal for a button state because users also need clear text, contrast, and focus styling.
Common box-shadow problems
- Blur cannot be negative. Use negative spread when you need a tighter shadow.
- Large shadows can be clipped. Check ancestor elements for
overflow: hidden. - Opacity matters more than size. A huge low-opacity shadow may feel softer than a small opaque one.
- One shadow is not always enough. CSS accepts comma-separated layers, although the ToolPixels generator creates one layer at a time.
- Shadows do not replace boundaries. Maintain enough contrast for controls and content even when shadows are absent.
Generate the CSS with ToolPixels
The free CSS Box Shadow Generator previews an outer or inset shadow while you adjust offsets, blur, spread, HEX color, and opacity. Copy the resulting declaration when the balance looks right.