CSS Box Shadow Generator

Design CSS box shadows visually with real-time preview and code export.

Generators100% private

CSS Box Shadow Generator

Design CSS box shadows visually with real-time preview and code export.

box-shadow: 0px 4px 12px 0px #00000040;

How it works

  1. 1
    Adjust offsetsSet horizontal, vertical, blur, and spread values.
  2. 2
    Pick colorChoose the shadow color and opacity.
  3. 3
    Copy CSSCopy the box-shadow CSS rule.

Frequently asked questions

What does each value do?
Horizontal offset: left/right. Vertical offset: up/down. Blur: how soft the edge is. Spread: how far the shadow extends.

Related tools

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor.

Meta Tag Generator

Generate Open Graph, Twitter Card, and standard meta tags for any URL.

Robots.txt Generator

Generate a valid robots.txt file with a visual rule builder.