TodayTools

CSS box shadow generator

Soft, natural shadows that give buttons and cards a finished look.

PrivateNo uploadsRuns in your browser

Donate
Background

Layers

X and Y move the shadow sideways and down. Blur softens it, Spread grows it, Inset puts it inside the box. Two soft layers look more real than one.

Output format
box-shadow:
  0 4px 6px -1px rgb(0 0 0 / 0.1),
  0 2px 4px -2px rgb(0 0 0 / 0.1);

Presets

A team working with laptops around a table

For apps people enjoy

Buttons that look ready to press.

The demo day. Cards that lift gently off the page.

BeforeFlat cards that feel cheap

With sdevSoft shadows in one copy

  • Friends working with drinks and laptops

    The weekend project

    A finished look without long tries.

  • Hands sketching a design next to a laptop

    The first sketch

    From paper to a polished screen.

How to make a CSS box shadow

  1. Start from a preset

    Pick a preset such as Medium or Floating, or press Add layer to start blank. The preview shows the shadow on a card, and you can switch the background to dark to check it there.

  2. Tune each layer

    Select a layer and move its offsets, blur, spread, colour and opacity. Tick Inset for an inner shadow. Layers are drawn in order, the first on top.

  3. Copy the code

    Copy the box-shadow declaration or the Tailwind class. Ctrl+C with nothing selected copies the CSS.

Good to know

  • A shadow that looks natural has a small blur close to the box and a larger, fainter one further away. The Medium and Large presets are built that way.
  • Use a negative spread to keep a big blur from leaking out on all sides, which makes the shadow look like it falls downward.
  • Tint the shadow with the colour of the box or the page instead of pure black; a teal card with a teal shadow at 25% looks softer.
  • On dark backgrounds, shadows nearly vanish. Raise opacity, or use the Glow preset with a light colour instead.
  • Inset shadows fake a pressed button or an engraved input. Combine one inset layer with one outer layer for the Neumorphic look.
  • Copy the Tailwind tab straight into a class list; the underscores are how Tailwind writes spaces inside square brackets.

Where people use it

  • Soft cards

    Give product or blog cards a gentle shadow so they lift off the page.

  • Pressed buttons

    Use an inset shadow to make a button look pressed in.

  • Check on dark mode

    Preview the shadow on a light and a dark background before you ship.

  • Add a gradient too

    Make a matching gradient for the card or the page behind it.

    CSS gradient generator

Why this one

Layered shadows look more real than one shadow, and here you can build and tune each layer with a live preview.

  • Stack many shadow layers for a natural look.
  • Live preview on light or dark.
  • Copy CSS or Tailwind classes.

What you can change

  • Blur, spread and opacity
  • Shadow colour
  • Inset
  • Corner radius
  • Light or dark preview

People find this page by searching

  • box shadow generator
  • css box shadow
  • box shadow css generator
  • tailwind shadow generator
  • inset shadow css
  • soft shadow css
  • card shadow css
  • layered box shadow
Cite this tool
  • APA
    sdev.in. (n.d.). CSS box shadow generator [Web tool]. https://www.sdev.in/tools/box-shadow
  • MLA
    "CSS box shadow generator." sdev.in, https://www.sdev.in/tools/box-shadow.
  • Chicago
    sdev.in. "CSS box shadow generator." https://www.sdev.in/tools/box-shadow.
  • BibTeX
    @misc{sdev-box-shadow,
  title = {CSS box shadow generator},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/box-shadow}},
  note = {Web tool}
}

Questions people ask

What do the four numbers in box-shadow mean?

In order: horizontal offset, vertical offset, blur radius and spread. Positive offsets move the shadow right and down. Blur softens the edge, and spread grows the shadow on every side before the blur is applied. A colour follows, and inset puts the shadow inside the box.

Why do designers stack several shadows?

A single big blur looks flat and grey. Two or three layers with growing offsets and lower opacity mimic how real light falls off, which is what the Medium, Large and Floating presets do. Pick Layered to see five soft layers combined.

How do I use the shadow in Tailwind CSS?

Copy the Tailwind tab. It is an arbitrary value class such as shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)], with spaces written as underscores and layers separated by commas. It works in Tailwind 3 and 4 without config.

Does box-shadow slow down the page?

Large blurs on many elements cost some paint time, and animating a shadow repaints on every frame. Keep blur below about 60px for lists, and animate opacity of a pseudo-element instead of the shadow itself.

How is the colour written?

Opaque shadows use the hex you pick. Any opacity below 100 is written in the modern rgb(r g b / a) form, which every current browser understands.

Donate