Skip to content
FR

CSS box-shadow generator

Create realistic layered CSS shadows: offset, blur, spread, color, inset. 10 presets including neumorphism. CSS and Tailwind code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Compose box-shadow values like designers do: up to 8 layers with offset, blur, spread, color and opacity, inner shadows, and 10 presets (soft, floating, neumorphism, glow, outline…). Also set the preview's radius and colors, then copy the CSS or Tailwind code.

When to use it

Cards and buttons

A soft two-layer shadow lifts a card off the background without weighing it down; a deeper shadow on hover makes it seem to rise.

Inset fields and areas

An inner (inset) shadow makes an input field look carved into the page.

Glow effects

A colored shadow with no offset creates a glowing halo, useful to highlight an active element.

How to use

  1. Start from a preset (soft, deep, neumorphism…).
  2. Tune each layer: offset, blur, spread, color.
  3. Copy the CSS or Tailwind code.

How it works

Each layer becomes one box-shadow value: optional “inset”, horizontal and vertical offsets, blur, spread and an rgba() color. Layers are comma-separated; the first one is drawn on top.

The preview applies exactly the copied value. The Tailwind version uses an arbitrary shadow-[…] value where spaces become underscores.

Tips for best results

  • Keep shadows faint (5 to 20% opacity): a shadow that's too dark looks dirty.
  • Use a tinted shadow color (navy rather than black) for a richer look.
  • Keep the same light direction for every shadow on a page.
  • For neumorphism, the element and the background must share the same color.

Common problems and fixes

The shadow is cut off

A parent with overflow: hidden clips overflowing shadows. Add padding to the parent.

The shadow doesn't follow my image's shape

box-shadow follows the rectangle. For a cut-out image, use filter: drop-shadow().

Neumorphism lacks contrast

That's the style's limit: keep it for decorative elements and use contrasted borders or text for what matters.

Frequently asked questions

Why several shadow layers?

In real life a shadow is sharp near the object and diffuse further away. Stacking two or three shadows with different blurs looks far more natural than a single one.

What does spread do?

It grows or shrinks the shadow before blurring. A negative spread keeps the shadow under the element, for a floating card effect.

What is neumorphism?

A style where the element seems carved out of the background: a dark shadow on one side, a light shadow on the other, on a background the same color as the element.

box-shadow or drop-shadow?

box-shadow follows the element's rectangle (with its radius). filter: drop-shadow() follows the real shape of a transparent PNG or a clip-path.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.