CSS Box Shadow Generator
Free CSS box-shadow generator with live preview. Stack up to 8 shadow layers, add inset shadows, start from 12 presets (soft, layered, neumorphic, glow) and copy the CSS or Tailwind class.
CSS box-shadow syntax
The box-shadow property takes up to six values: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius and colour.
- Horizontal offset: positive moves the shadow right, negative moves it left.
- Vertical offset: positive moves it down, negative moves it up.
- Blur radius: 0 gives a hard edge. Higher values make it softer. It can’t be negative.
- Spread radius: grows (positive) or shrinks (negative) the shadow before blurring.
- Colour: use a semi-transparent colour like
rgba(0, 0, 0, 0.1)so the shadow looks natural on any background.
Basic box shadow
.card {
/* x-offset y-offset blur spread color */
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}Multiple box shadows
Separate shadows with commas. The first one is drawn on top. Stacking a few shadows with growing blur looks much more realistic than one big shadow.
.card {
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08),
0 2px 2px rgba(0, 0, 0, 0.08),
0 4px 4px rgba(0, 0, 0, 0.08),
0 8px 8px rgba(0, 0, 0, 0.08),
0 16px 16px rgba(0, 0, 0, 0.08);
}Inset box shadow
The inset keyword draws the shadow inside the element, which makes it look pressed in. Good for inputs and pressed buttons.
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}Shadow on one side only
Use a negative spread equal to the blur, so the shadow only shows on the side you offset it to.
.header {
/* bottom only */
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
}Glow and border effects
With no offset, a shadow becomes a glow. With no blur and only spread, it becomes a border that doesn’t take up layout space.
.glow {
box-shadow: 0 0 24px 4px rgba(59, 130, 246, 0.55);
}
.ring {
box-shadow: 0 0 0 3px #3b82f6;
}Box shadow in Tailwind CSS
Tailwind ships shadow-sm, shadow-md, shadow-lg and more. For a custom shadow, use an arbitrary value with underscores instead of spaces: shadow-[0_4px_12px_rgba(0,0,0,0.15)]. The generator above writes this class for you.
FAQ
Does box-shadow affect layout?
No. Shadows are painted outside the box and don’t take up space or move other elements. They can be clipped by a parent with overflow: hidden.
What’s the difference between box-shadow and drop-shadow?
box-shadow follows the element’s rectangle and border radius. filter: drop-shadow() follows the actual shape, including transparent PNGs and SVGs, but has no spread or inset.
Does box-shadow hurt performance?
Static shadows are cheap. Animating a big blurred box-shadow repaints on every frame. Instead, animate the opacity of a pseudo-element that carries the shadow.
Is box-shadow supported in all browsers?
Yes. It works in every modern browser without prefixes.
Styling text instead? Try the CSS Text Shadow Generator. More tools: Border Radius Generator, Neumorphism CSS Generator, CSS Gradient Generator.