Box Shadow Generator
Tune a shadow and copy the CSS.
About Box Shadow Generator
A CSS box-shadow generator with sliders for offset, blur and spread, an eight-digit hex colour for alpha and an inset option. Preview it and copy the rule.
How to use
- Drag the sliders for horizontal offset, vertical offset, blur and spread, or start from a preset (Soft, Hard, Deep, Inset glow, Subtle inset).
- Set the colour as six hex digits, or eight to include alpha, for example #00000040 for black at 25% opacity.
- Tick Inset to draw the shadow inside the box.
- The preview and the CSS update as you edit. Copy the rule, or download it as box-shadow.css.
Options
| Property | Range | Default |
|---|---|---|
| Horizontal offset | -50 to 50 px | 5 px |
| Vertical offset | -50 to 50 px | 5 px |
| Blur | 0 to 100 px | 10 px |
| Spread | -50 to 50 px | 0 px |
| Colour | #RRGGBB or #RRGGBBAA | #000000 |
| Inset | on or off | off |
The rule is written as box-shadow: [inset] x y blur spread colour;. Up to five layers can be added and edited one at a time; the rule joins them with commas.
Example
Soft preset
→ box-shadow: 3px 3px 15px 0px #00000040;
Privacy
The rule is built in the browser. No request is made, and nothing is stored.
Frequently asked questions
- What do the four numbers in box-shadow mean?
- In order: horizontal offset (positive moves the shadow right), vertical offset (positive moves it down), blur radius (0 is a hard edge, larger is softer) and spread (positive grows the shadow, negative shrinks it). The colour follows, and the optional inset keyword draws the shadow inside the element.
- How do I make a box-shadow transparent?
- Give the colour an alpha channel. An eight-digit hex such as #00000040 is black at 25% opacity (40 hex is 64 of 255), and rgba(0, 0, 0, 0.25) means the same thing. Transparent shadows look more natural than solid ones.
- What is the difference between blur and spread?
- Blur softens the edge of the shadow without changing its overall size much; spread enlarges or shrinks the shadow shape before the blur is applied. A spread equal to the negative of the blur keeps a soft shadow from leaking past the element.
- Does box-shadow affect layout?
- No. A shadow is painted outside the box but takes no space, so it does not push neighbouring elements or change the element’s size, unlike border or outline with an offset.