TheOmniTool logoTheOmniTool
Color

Box Shadow Generator

Design CSS box shadows visually.

0px
8px
24px
-4px
25%
#000000
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.25);

How to use this tool

  1. 1Adjust the offset, blur, spread, and color sliders.
  2. 2Watch the live preview update.
  3. 3Copy the generated CSS.

Frequently asked questions

What do blur and spread do?

Blur softens the shadow edge; spread grows or shrinks the shadow before blurring. Negative spread makes tighter shadows.

Can I make an inset shadow?

Yes, toggle the inset option to draw the shadow inside the element.

Related tools

Color Converter

Convert colors between HEX, RGB, and HSL.

Contrast Checker

Check WCAG color contrast for accessibility.