Toolbuns/Box Shadow

Box-Shadow Generator

Dial in a CSS box-shadow and copy the code.

Offset X0px
Offset Y12px
Blur28px
Spread-6px
Color
Opacity35%
box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.35);

Design a CSS box-shadow visually, offsets, blur, spread, color, and inset, and copy the code. Live preview, all in your browser.

How to use Box Shadow

  1. Adjust the horizontal and vertical offset, blur, and spread.
  2. Pick the shadow color and opacity.
  3. Toggle inset for an inner shadow if you want one.
  4. Copy the generated CSS.

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius, and color. 'inset' draws the shadow inside the element instead of outside.

Can I stack multiple shadows?

CSS allows multiple comma-separated shadows. This tool builds one you can copy; paste several together for layered effects.

Is the CSS ready to paste?

Yes. It outputs a standard box-shadow declaration you can drop straight into your stylesheet.

Related tools
Color ConverterGradient