CSS Box Shadow Generator

CSS Box Shadow Generator

Build anything from a subtle card shadow to a neon glow. Adjust horizontal and vertical offset, blur, spread, color, and opacity with sliders, toggle inset for inner shadows, and add more layers with the + button. The preview box and its background color are adjustable, so you can test the shadow on the same colors as your design.

Anatomy of a shadow

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
/*          x  y  blur spread color */

• Offset X / Y – moves the shadow. Positive Y means light from above, which looks most natural.
• Blur – softens the edge. Larger values make the element look higher above the page.
• Spread – grows or shrinks the shadow before blurring. Negative spread with a large blur gives the soft "floating" look used in modern UIs.
• Inset – draws the shadow inside the box, useful for pressed buttons and input fields.

Why layer shadows?

Real shadows have a sharp, dark core and a wide, faint outer area. Material Design and most design systems therefore combine two or three shadows in one box-shadow declaration, separated by commas. The Material 2dp and Floating presets show the technique; the first layer in the list is drawn on top.

Performance and accessibility

Shadows are cheap to draw, but animating a large blur on many elements can cost frames. Animate opacity of a pseudo-element that carries the shadow instead of the box-shadow itself. Do not rely on shadows alone to separate content: a subtle border helps users in high-contrast mode, where shadows are removed.

For translucent cards with blurred backgrounds, try the Glassmorphism Generator.