A simple card shadow
Offset 0 and 4 px, blur 12 px, black at 25%: box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.25);
Box Shadow Generator
Build layered CSS box shadows with sliders and a live preview, including inner shadows.
CSS
box-shadow: 0 12px 32px -8px rgb(15 27 76 / 0.25), 0 2px 4px 0 rgb(15 27 76 / 0.12);Runs in your browser — nothing you enter is sent to a server.
How the Box Shadow Generator works
Each shadow layer has a horizontal and vertical offset, a blur (how soft the edge is), a spread (grows or shrinks the shadow before blurring), a color and an opacity. Inset puts the shadow inside the box. Layers are separated by commas in the CSS; the first layer is drawn on top.
Real shadows are rarely one layer. The default combines a soft, wide shadow with a small, sharp one close to the box, which reads as natural depth.
Examples
An inner shadow
Adding a second, inset layer of 1 px offset and 2 px blur gives a pressed look: …, inset 0 1px 2px 0 rgb(51 102 204 / 1).
Frequently asked questions
What is the difference between blur and spread?
Spread makes the shadow bigger or smaller with a hard edge; blur then softens the edge. A negative spread with a large blur gives a shadow that seems to float.
Do shadows slow pages down?
Static shadows are cheap. Animating a large, blurry shadow can make scrolling stutter on phones — animate opacity instead.
Why use a colored shadow?
A shadow tinted with the background or brand color looks softer and more natural than pure black, especially on colored backgrounds.
Related tools
Border Radius Generator
Round the corners of a box together or one by one, and get the shortest CSS.
Design Tools
CSS Gradient Generator
Design linear, radial and conic CSS gradients with a live preview and copy the CSS.
Design Tools
Color Converter
Convert colors between HEX, RGB, HSL, HSV and CMYK, and check their contrast against white and black.
Converters