CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

CSS
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
Tailwind
shadow-[0px_4px_16px_0px_rgba(0,_0,_0,_0.08)]
Shadow layers
Layer 1
Offset X0px
Offset Y4px
Blur16px
Spread0px
Opacity8%

01 — Overview

How it works

Compose box shadows visually. Stack multiple layers, tweak offset, blur, spread, color, and opacity for each, and watch the preview update live. Output as plain CSS or as a Tailwind arbitrary value. Common shadow presets are one click away.

02 — Use cases

When to use it

  1. 01

    Find the right elevation for a card without 5 minutes of trial and error

  2. 02

    Build a layered shadow that doesn't look like a default Material drop

  3. 03

    Translate a Figma shadow effect into CSS for production

  4. 04

    Get the Tailwind arbitrary-value form of a custom shadow

03 — Examples

Real input, real output

soft elevation, 4px y-offset, 16px blur, 8% opacity

ex 01

box-shadow: 0 4px 16px 0 rgba(0,0,0,0.08);

A subtle card-elevation shadow.

two-layer crisp shadow

ex 02

box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08);

A near-surface highlight stacked with a softer ambient layer.

04 — FAQ

Frequently asked

Spread grows (positive) or shrinks (negative) the shadow before blur is applied. A positive spread creates a halo; a negative spread keeps the shadow inside the element's bounds.

05 — More

Tools that pair well

Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Color/glassmorphism

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient

Color Picker & Converter

Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.

Color/color