What is a box shadow?
The CSS box-shadow property draws a shadow around an element such as a card, button, image or popup. Shadows add depth and help users see which parts of a page sit "above" others. A soft, subtle shadow is one of the simplest ways to make a design look modern and polished.
How to use the generator
- Move the horizontal and vertical offset sliders to set where the shadow falls. Positive values move it right and down.
- Increase blur for a softer edge and adjust spread to make the shadow larger or smaller than the box.
- Choose the shadow color and opacity. Low opacity (10 to 30 percent) looks most natural.
- Tick Inset for an inner shadow that makes the element look pressed in.
- Copy the CSS code.
The box-shadow syntax
box-shadow: [inset] offset-x offset-y blur spread color;
- offset-x / offset-y: how far the shadow moves horizontally and vertically.
- blur: 0 gives a hard edge; larger values make it softer and wider.
- spread: positive values grow the shadow, negative values shrink it. A negative spread with a large blur gives the popular "floating card" effect.
- color: usually black or a dark version of the background, with transparency.
Popular shadow styles
| Style | CSS |
|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.12) |
| Floating card | 0 10px 25px -5px rgba(0,0,0,0.25) |
| Sharp retro | 6px 6px 0 0 rgba(0,0,0,1) |
| Inner field | inset 0 2px 4px rgba(0,0,0,0.1) |
Frequently asked questions
Can I add more than one shadow?
Yes. Separate shadows with commas, for example a small sharp shadow plus a large soft one. Layered shadows often look more realistic.
Do shadows slow down a website?
Static shadows are cheap to draw. Animating large blurred shadows can be slow on older phones, so animate opacity instead.
What about shadows on text?
Text uses a different property, text-shadow, which has no spread and no inset option.