CSS box-shadow generator

CSS box-shadow generator features

• 01

  Every parameter as a slider

  Horizontal and vertical offsets, blur radius, spread radius, and opacity each have their own slider plus a numeric input — fine-tune by drag, then nudge by keyboard for pixel precision.

• 02

  Inset shadows supported

  Flip the inset toggle to switch from a drop shadow to an inner shadow — useful for pressed buttons, sunken inputs, and neumorphic surfaces.

• 03

  Color + opacity, separately

  Pick the base color in any hex value, then adjust opacity independently. The output uses rgba() so the color and alpha stay readable when you copy the CSS.

CSS box-shadow generator FAQ

What does the spread value do?

Positive spread enlarges the shadow in all directions before the blur is applied; negative spread shrinks it. It's useful for tight, defined glows when paired with a small blur.

Can I add multiple shadows?

This generator outputs a single shadow declaration. To layer shadows, copy the value, then paste it twice in your CSS separated by a comma — box-shadow accepts a comma-separated list.

Why is my inset shadow invisible?

Inset shadows draw inside the element, so they need a background color or padding to be visible. They also won't show on transparent or zero-sized elements.

Is the preview pixel-accurate?

Yes — the preview uses the actual CSS box-shadow property on a real element, so what you see is exactly what your stylesheet will render.