CSS Box Shadow Generator

Create layered box shadows visually — offset, blur, spread, color, opacity, inset — with curated presets and copy-ready CSS. Nothing leaves your browser.

Shadow Controls

Offset X0px

Offset Y4px

Blur12px

Spread0px

Opacity25%

Shadow color

#000000 · rgba(0, 0, 0, 0.25)

Inset shadow

Presets

Live Preview

Output CSS

box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);

Shadow & Depth Patterns

Get the elevation systems we use across product UIs — layered shadows, focus rings, and depth rules that survive dark mode.

No spam. Unsubscribe anytime.

Explore Related Tools

Discover more utility-driven tools designed to enhance your workflow and technical excellence.

Tailwind Color Palette Generator

Generate a complete Tailwind CSS shade scale (50–950) from any base color. Live preview, copy the config, or export as CSS variables.

CSS & Design

CSS Gradient Generator

Build linear and radial gradients with unlimited color stops, adjustable angles, and a live preview. Copy production-ready CSS instantly.

CSS & Design

Border Radius Generator

Drag each corner to craft pill, blob, and rounded shapes. Generates clean CSS with per-corner values and a live element preview.

CSS & Design