CSS box shadow generator

Stack shadow layers, preview them live, copy CSS or Tailwind. Ctrl+C copies the CSS.

Background

Layers

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

How to make a CSS box shadow

  1. Start from a preset

    Pick a Tailwind or Material preset, 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 Tailwind md and lg 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.

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 Tailwind and Material 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.