Open toolkit

design

CSS Box-Shadow Generator

Adjust offset, blur, spread, color, and opacity with sliders to design a box-shadow, with a live preview on a sample card. Copy the generated CSS declaration directly into your stylesheet.

  • Nothing leaves your device
  • Runs entirely in your browser
  • Free, no account needed
Use CSS Box-Shadow Generator - free

Frequently asked questions

What does spread control?

Spread expands or shrinks the shadow shape in all directions before blur is applied.

Can I use a semi-transparent shadow color?

Yes, the opacity slider controls the alpha value of the shadow color.

Does it support multiple stacked shadows?

This version generates a single shadow layer.

Design a box-shadow visually - free.

Open CSS Box-Shadow Generator
  • Nothing leaves your device
  • No upload required
  • No account needed
  • Unlimited use, always free

Related tools

CSS Gradient Generator

Create a custom linear gradient and copy the ready-to-use CSS.

CSS Border-Radius Generator

Design custom rounded corners for each side and copy the CSS.

Color Converter

Convert colors between HEX, RGB, and HSL, with a live picker.