the IT Hustle
ToolsPricingBlogAbout

CSS Box Shadow Generator

Design box shadows visually with multiple layers. Adjust offset, blur, spread, color, and inset per layer. Presets for subtle, heavy, neumorphism, and glassmorphism effects.

CSS Box Shadow Generator

Design multi-layer box shadows visually. Adjust offsets, blur, spread, and color per layer. Apply presets or build from scratch.

Box Settings
Presets
CSS Output
box-shadow:
    0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Shadow Layers (1)
Layer 1
Offset X0px
Offset Y4px
Blur12px
Spread0px
Opacity25%
Color#000000

How to Design Box Shadows

Create CSS box shadows with multiple layers.

  1. 1
    Add layersClick Add Layer for each shadow.
  2. 2
    AdjustSet offset, blur, spread, color, inset per layer.
  3. 3
    CopyCopy the generated box-shadow CSS.

Frequently Asked Questions

A soft UI style using subtle inner/outer shadows for a raised/pressed effect. The preset generates both layers.

CSS supports unlimited. The tool supports up to 5.

Related Tools

CSS Gradient GeneratorCSS Animation Builder