CSS Box Shadow Generator

Visually build a CSS box-shadow and copy the code.

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

Related Tools

🎨
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
 🎨
Color Converter
Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast ratios, and generate a tonal shade strip.
 🎨
Color Contrast Checker
Check text and background color contrast against WCAG accessibility levels.

0 comments

How it works

Adjust the horizontal and vertical offset, blur radius, spread, color, and opacity, and the tool assembles a valid box-shadow value in real time. A toggle switches between an outer shadow and an inset (inner) shadow. A live preview box updates as you drag the sliders so you see exactly what the CSS produces, and the generated rule is shown ready to copy. All rendering uses the browser's own CSS engine — nothing is sent anywhere.


              box-shadow: 0 4px 12px 0 rgba(0,0,0,0.25);

Common use cases

  • Designing a card or button shadow without writing CSS by hand.
  • Fine-tuning blur and spread to match a design mockup.
  • Creating an inset shadow for a pressed or inlaid effect.

Frequently asked questions

What is the difference between blur and spread?

Blur softens the shadow edge — a higher value makes it fuzzier. Spread grows or shrinks the shadow size before blurring, so a positive spread makes it larger and a negative one pulls it in.

Can it make inset shadows?

Yes. Toggle inset to move the shadow inside the element, which is useful for pressed buttons, wells, and inlaid panels.

Is the generated CSS standard?

Yes. The box-shadow property is supported unprefixed by every modern browser.