Toolkit by WarishLabs
Toolkitby WarishLabs

CSS Box Shadow Designer

Design rich box shadows visually with instant code output.

Horizontal Offset (10px)
Vertical Offset (10px)
Blur Radius (20px)
Spread Radius (0px)
CSS Output
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);
Processed locally in your browser — nothing is uploaded.

How to Use

  1. Adjust sliders for horizontal, vertical offsets, blur, and spread.
  2. Check the inset shadow option if desired.
  3. Copy the generated box-shadow CSS code.

FAQ

What is a box shadow?

The box-shadow property attaches one or more shadows to an element block.

Related Tools

Command Palette

Search for a command to run...