Quackyard
  • Loading…

Box Shadow Generator

Design CSS box shadows layer by layer, preview them, and copy the value with a matching Tailwind class.

Preview
box-shadow
0px 1px 2px 0px rgba(23, 27, 33, 0.24), 0px 4px 8px -2px rgba(23, 27, 33, 0.14), 0px 12px 24px -6px rgba(23, 27, 33, 0.10)
Tailwind
shadow-[0px_1px_2px_0px_rgba(23,_27,_33,_0.24),_0px_4px_8px_-2px_rgba(23,_27,_33,_0.14),_0px_12px_24px_-6px_rgba(23,_27,_33,_0.10)]
Layer 1
0px
1px
2px
0px
Layer 2
0px
4px
8px
-2px
Layer 3
0px
12px
24px
-6px
3 of 6 layers

Runs in your browser. Nothing you enter is sent anywhere.

How to use it

The page opens on the Raised preset under a white card. Start from Subtle, Raised or Soft, or build your own.

  1. Each Layer box has sliders in whole pixels: X and Y from -40 to 40, Blur from 0 to 60 and Spread from -20 to 20. Positive X moves the shadow right, positive Y moves it down.
  2. Type the layer’s color into Color: hex, rgb(), hsl() or a name like tomato. The round swatch beside it picks an opaque 6-digit hex.
  3. Tick Inset, drawn inside the edge for an inner shadow. Add layer adds one, up to 6, and Remove deletes one.
  4. Check the preview on White, Grey, Dark, Checker or a color of your own.

Copy the value under box-shadow with Copy CSS, or the class under Tailwind with Copy Tailwind. If a color can’t be read, a message names the layer and the problem, and the page keeps the last shadow that worked.

Examples

A shadow under the bottom edge only, with Y 8, Blur 6, Spread -6 and rgb(0 0 0 / 40%):

0px 8px 6px -6px rgb(0 0 0 / 40%)
shadow-[0px_8px_6px_-6px_rgb(0_0_0_/_40%)]

The negative spread shrinks the shadow 6px on every side, and the 8px drop pushes only its bottom edge back out past the card.

A two-ring focus outline: layer 1 with Spread 2 and #ffffff, layer 2 with Spread 4 and #3b82f6, both with Blur 0:

0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #3b82f6

Layer 1 paints on top, so you see 2px of white, then 2px of blue. Swap the layers and the blue ring hides the white one.

A color with the alpha in the wrong place, rgb(0 0 0 0.4), is rejected:

Layer 1: In the modern shape the alpha goes after a "/", as in rgb(255 87 51 / 0.5).

Space-separated rgb() takes its alpha after a slash; the comma form rgba(0, 0, 0, 0.4) also works, but not a mix of the two.

Good to know

  • Each layer is inset? x y blur spread color, from CSS Backgrounds and Borders Level 3. Browsers also accept a bare 0, the color first, and a missing blur or spread, which counts as 0. Of comma-separated layers, the first is drawn on top.
  • Blur can’t be negative; spread can. The spec asks for a Gaussian blur with a standard deviation of half the blur value. Spread grows the shape before blurring, or shrinks it when negative.
  • Shadows take no space. They don’t change layout or add scrollbars, and an ancestor with overflow: hidden cuts them off, so give that container padding.
  • Shadows follow border-radius. An outer shadow is painted only outside the border box, so a translucent card doesn’t show its own shadow through it. An inset shadow is painted inside the padding box, over the background and under the content.
  • The color is copied as typed. Accepted: hex with 3, 4, 6 or 8 digits (#RRGGBBAA is from CSS Color 4), rgb(), rgba(), hsl() and hsla() in comma or slash form, the 148 named colors, transparent and currentColor. oklch(), color-mix() and var(--…) are rejected, though browsers support them. Out-of-range channels aren’t flagged; CSS clamps them.
  • Bare numbers in hsl() are percentages. CSS Color 4 lets the space-separated form write hsl(210 50 40) for hsl(210 50% 40%), so 0.5 there is 0.5%, not half. The comma form needs %.
  • The Tailwind class is an arbitrary value. Tailwind turns each _ back into a space at build time, and it finds classes by scanning your files as text, so the class must appear whole in the source.
  • A shadow has 1 to 6 layers, and a color is at most 120 characters.

Questions

How do I add a box shadow in CSS?

Set box-shadow on the element: box-shadow: 0 4px 8px rgb(0 0 0 / 20%); is a shadow 4px down with an 8px blur in 20% black. An optional spread goes after the blur.

How do I add a shadow only to the bottom of an element?

Use a downward offset and a negative spread of about the same size, such as 0 8px 6px -6px rgb(0 0 0 / 40%). The spread pulls the sides and top in under the element, so only the bottom edge shows.

How do I use a custom box shadow in Tailwind?

Use an arbitrary value with underscores for spaces, like shadow-[0px_8px_6px_-6px_rgb(0_0_0_/_40%)]. To reuse it by name in Tailwind v4, put --shadow-card: 0 8px 6px -6px rgb(0 0 0 / 40%); inside @theme to get shadow-card; in v3, add card under theme.extend.boxShadow.

How do I make an inner shadow in CSS?

Start the layer with inset. With the inset box ticked, Y 2, Blur 4 and #0000001f, the value is inset 0px 2px 4px 0px #0000001f: a soft shade inside the top edge.