CSS Box Shadow Examples: 40 Shadows You Can Copy

By the We.Inc editorial team · Editorial policy

A box shadow is written as box-shadow: x-offset y-offset blur spread color, with an optional inset keyword. Soft, realistic shadows usually stack two or three layers with low opacity, and a shadow on the bottom only uses a positive y offset with a negative spread. Pick any of the 40 examples below and copy it as CSS or Tailwind.

The five parts of a box-shadow value
PartExampleWhat it does
x offset0Moves the shadow right (positive) or left (negative)
y offset8pxMoves the shadow down (positive) or up (negative)
blur radius24pxSoftens the edge; cannot be negative; 0 is a hard edge
spread radius-6pxGrows (positive) or shrinks (negative) the shadow before blurring
colorrgb(0 0 0 / 0.15)Falls back to the element's text colour when left out
insetinsetDraws the shadow inside the border instead of outside

Updated

Most shadow lists give you a picture and a line of CSS. This one also explains why a shadow looks real or fake, gives you a matching elevation scale you can drop into a design system, and shows how to keep shadows visible on dark backgrounds. Every example is original and runs live in your browser.

40 box shadow examples

Box shadow on the bottom only

A negative spread shrinks the shadow on every side, and the y offset then pushes it out below. Keep the spread close to minus the blur so nothing leaks past the left and right edges.

Three bottom-only shadows

From left: a tight edge, a softer drop and the thin line used under sticky headers.

<style>
  .row { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px }
  .row div { width: 120px; height: 80px; background: #fff; border-radius: 10px; border: 1px solid #eee }
  .a { box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3) }
  .b { box-shadow: 0 12px 12px -10px rgb(0 0 0 / 0.25) }
  .c { box-shadow: 0 4px 6px -4px rgb(0 0 0 / 0.15) }
</style>
<div class="row"><div class="a"></div><div class="b"></div><div class="c"></div></div>

An elevation scale you can reuse

Five steps cover most interfaces. Each one doubles the offset and blur of the last and keeps a tight contact layer underneath.

Suggested elevation tokens
TokenUse forValue
--shadow-1Resting cards, inputs0 1px 2px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06)
--shadow-2Hovered cards0 1px 2px rgb(0 0 0 / .06), 0 4px 8px rgb(0 0 0 / .08)
--shadow-3Dropdowns, popovers0 2px 4px rgb(0 0 0 / .06), 0 12px 24px rgb(0 0 0 / .10)
--shadow-4Drawers, sticky bars0 4px 8px rgb(0 0 0 / .06), 0 24px 48px rgb(0 0 0 / .14)
--shadow-5Dialogs0 8px 16px rgb(0 0 0 / .08), 0 40px 80px rgb(0 0 0 / .20)

Elevation tokens with a dark theme override

Components use var(--shadow-2) and never hard-code a shadow. The dark block swaps in a faint rim plus deeper black.

:root {
  --shadow-1: 0 1px 2px rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .06), 0 4px 8px rgb(0 0 0 / .08);
  --shadow-3: 0 2px 4px rgb(0 0 0 / .06), 0 12px 24px rgb(0 0 0 / .10);
  --shadow-4: 0 4px 8px rgb(0 0 0 / .06), 0 24px 48px rgb(0 0 0 / .14);
  --shadow-5: 0 8px 16px rgb(0 0 0 / .08), 0 40px 80px rgb(0 0 0 / .20);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 3px rgb(0 0 0 / .5);
    --shadow-3: 0 0 0 1px rgb(255 255 255 / .08), 0 12px 24px rgb(0 0 0 / .6);
    --shadow-5: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 80px rgb(0 0 0 / .7);
  }
}
.card { box-shadow: var(--shadow-1); transition: box-shadow .2s }
.card:hover { box-shadow: var(--shadow-2) }

Single shadow vs layered shadow

Same size, different realism

The left card uses one big blur. The right card spreads the same darkness over three layers, which reads as a softer, more natural lift.

<style>
  body { background: #f4f4f5 }
  .row { display: flex; gap: 24px; flex-wrap: wrap; padding: 20px }
  .row div { width: 130px; height: 100px; background: #fff; border-radius: 14px; display: grid; place-items: center; font-size: 13px }
  .one { box-shadow: 0 10px 30px rgb(0 0 0 / .3) }
  .three { box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 4px 8px rgb(0 0 0 / .08), 0 16px 32px rgb(0 0 0 / .08) }
</style>
<div class="row"><div class="one">One layer</div><div class="three">Three layers</div></div>

Why layered shadows look more real

Real objects cast two kinds of shadow at once: a small dark one right where they touch the surface and a wide pale one from light bouncing around the room. A single blurred shadow tries to be both and ends up looking like a grey halo.

Stacking two to four layers, each with roughly double the offset and blur of the one before and a lower opacity, imitates that mix. The cost is small, but very large blur values on many elements can slow down scrolling on weak devices, so keep heavy shadows to a few raised surfaces.

Shadows as a scale, not a one-off

Products feel consistent when every raised thing picks from a short ladder: resting cards, hovered cards, dropdowns, dialogs. Store each step as a custom property and reuse it, so changing the light direction later means editing one place.

Keep the y offset growing faster than the x offset, which stays at zero for a light source directly above. Mixing light directions across components is one of the quickest ways to make an interface look assembled from parts.

How it works

  1. Filter the gallery by style, such as layered, bottom only, inset or coloured.
  2. Each card shows the shadow on a real surface. Switch the background to dark to see how it holds up.
  3. Click a card to copy it. Use the toggle to choose plain CSS or a Tailwind arbitrary class.
  4. For a whole product, copy the elevation tokens further down instead of single shadows.

Tips

Frequently asked questions

How do I add a box shadow only at the bottom?

Give the shadow a positive y offset and a negative spread about the same size as the blur, for example box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). The negative spread pulls the shadow in from the left, right and top, so only the part pushed down past the bottom edge shows.

How do I use more than one shadow?

Separate the shadows with commas. The first shadow in the list is painted on top of the others, so put the tight, darker contact shadow first and the wide, faint ambient shadow last.

Why does my shadow disappear on a dark background?

A black shadow on a near-black page has almost no contrast. In dark themes, lean on a lighter surface colour for raised elements, add a thin light border or a 1px inset highlight, and raise the shadow opacity rather than relying on the shadow alone.

What is the difference between box-shadow and drop-shadow()?

box-shadow follows the element's box and border-radius. filter: drop-shadow() follows the visible pixels, so it hugs transparent PNGs and SVG shapes, but it has no spread value and no inset option.

How do I write a custom shadow in Tailwind?

Use an arbitrary value with underscores in place of spaces, such as shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. The built-in scale runs from shadow-2xs to shadow-2xl, and inset-shadow-sm and friends cover inner shadows.

Related: CSS shadow generator, Text shadow generator, CSS button states, Dark mode for websites, CSS variables guide.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

Who It's For

Features

Resources

Company

View Sitemap