A box shadow generator builds the CSS box-shadow value for a shadow round an
element. Stack as many layers as you like, set the offset, blur, spread,
colour and opacity of each, and copy CSS that works in every browser.
Preview surface
Presets
Layers (top layer first)
Layer 1 of 1
CSS
box-shadow: 0 6px 0 0 rgb(0, 0, 0);Everything runs in your browser. Nothing you make is uploaded.
How to use it
- Start from a preset. coding.kitty is the hard black shadow on this site's cards. Layered and Subtle are soft UI shadows, Pressed is inset, and Glow and Ring use spread.
- Pick a layer. The list is the stack, top layer first. Tap a layer to edit it, and use the up and down arrows beside it to change the order.
- Shape it. X offset and Y offset move the shadow, Blur
softens it, Spread grows or shrinks it, and Inset puts it inside the
card. Type any CSS colour in the box, such as
#000000,navyorrgb(0 0 0 / 25%), or use the picker, and set Opacity with the slider. - Add or remove layers. Add puts a new soft layer at the bottom of the stack. Remove deletes the selected one; a shadow always keeps at least one.
- Copy CSS. The declaration under the controls is ready to paste into a rule. Switch the preview to Dark to check a glow or a light shadow.
Everything runs in your browser. Nothing you make is uploaded.
The box-shadow syntax
/* x offset, y offset, blur, spread, colour */
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25);
/* inset draws it inside the element */
box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.35);
/* several layers, comma-separated, top layer first */
box-shadow:
0 0 0 4px rgb(250, 204, 21),
0 0 0 7px rgb(0, 0, 0);- Offsets move the shadow. Negative x goes left, negative y goes up. Light usually comes from above, so most shadows have a positive y and an x of 0.
- Blur is how far the edge fades.
0is a sharp edge; a blur of10pxfades from 10px inside the shadow's edge to 10px outside it. - Spread grows the shadow by that much on every side before it is blurred. A negative spread with a large blur keeps a soft shadow tucked under the element instead of spilling out at the sides.
- Colour is any CSS colour. Shadows are almost always a see-through black
or a darker shade of the background, so the tool prints
rgba()with the opacity in plain sight. The Color Converter turns it into HEX, HSL or OKLCH.
Layer order
When there is more than one shadow, CSS paints the first one in the list on top and each later one underneath. The Ring preset shows why this matters: a 4px yellow ring sits on top of a 7px black one, so you see yellow with a black outline. Move the black layer up and it covers the yellow completely.
Stacking soft shadows is also how realistic depth is drawn. One big blurry shadow looks like a grey smudge; five small ones that double in offset and blur each time, as in Layered, fade out the way a real shadow does.
Gotchas
overflow: hiddenclips shadows. A parent with it cuts off the outside shadows of everything inside it. Give the parent padding, or move the shadow to an element that is not clipped.- Shadows do not take up space. They never push other elements away, and a big one can overlap its neighbours. Leave margin for it.
- Shadows follow
border-radiusbut not transparent pixels. For a PNG with a cut-out shape, usefilter: drop-shadow(), which has no spread or inset. - Animating box-shadow is expensive. The browser repaints on every frame.
For a hover lift, animate the
opacityof a pseudo-element that holds the bigger shadow, or keep the animation short. - A shadow is not a border. A spread-only shadow such as
0 0 0 2pxlooks like one and does not change the layout, which makes it a good focus ring, but it disappears in Windows High Contrast mode. Pair it with anoutline.
Keep going
The CSS Gradient Generator builds the
background to put under your card, and the Contrast Checker
checks the text on it. The CSS cheat sheet
covers box-shadow and the properties around it. More free tools that run in
your browser are on the tools page.
Common questions
How do I add a box shadow in CSS?
Use the box-shadow property with an x offset, a y offset, a blur, a spread and a colour: box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25); puts a soft shadow under an element. This box shadow generator builds the value for you: move the sliders, watch the card, and copy the line.
What do the four numbers in box-shadow mean?
In order: the horizontal offset (positive moves the shadow right), the vertical offset (positive moves it down), the blur radius (0 is a hard edge, larger is softer) and the spread (positive grows the shadow past the element, negative shrinks it). Blur and spread are optional and default to 0. Blur cannot be negative.
How do I add more than one box shadow?
Separate the shadows with commas in one box-shadow value. The first shadow in the list is painted on top and each later one underneath it, so order matters when they overlap. Several soft shadows of growing size look more natural than one big one, which is what the Layered preset in this CSS box shadow tool does.
What does inset do in box-shadow?
The inset keyword draws the shadow inside the element's border instead of outside it, so the element looks pressed in rather than lifted up. Inset and outside shadows can be mixed in one box-shadow value, and the Inset switch in the generator sets it per layer.
How do I make a hard shadow with no blur?
Set the blur to 0 and use an opaque colour: box-shadow: 0 6px 0 0 rgb(0, 0, 0); is the solid black shadow on the cards across this site. Offsetting both x and y, as in 8px 8px 0 0, gives the diagonal hard shadow of brutalist designs.
Why is my box shadow not showing?
The usual causes are a parent with overflow: hidden clipping it, a colour with 0 opacity, all four lengths at 0, or the shadow landing on a background the same colour as it. A shadow also follows border-radius but ignores transparent parts of an image; for those, use filter: drop-shadow() instead.
Is anything I make sent to a server?
No. The shadow is built and previewed in your browser and its values are never submitted anywhere. The site records that the tool was used, how many layers the shadow had and whether any were inset, so we know which tools are worth building next. The lengths and colours are never part of that.