CSS Box Shadow Generator

Design CSS box shadows with an intuitive visual editor. Adjust horizontal/vertical offset, blur radius, spread, and color. Preview in real-time and copy the CSS code.

12px

Shadow 1

box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 12px;

How to Use CSS Box Shadow Generator

  1. Paste or enter your data in the input field above.
  2. The result appears instantly — no button press needed.
  3. Copy the output to your clipboard with one click.

Frequently Asked Questions

Can I add multiple shadows?
Yes! You can add multiple shadow layers and customize each one independently for complex, layered shadow effects.

Related Tools

PopularImage, Color & Design

Color Picker

Pick colors and convert between HEX, RGB, HSL, CMYK. Check WCAG contrast ratios.

Open tool →
NewImage, Color & Design

CSS Gradient Generator

Create beautiful CSS linear and radial gradients with a visual editor and copy the code.

Open tool →