GainUtility

CSS box-shadow examples you can copy

Nine shadows you can paste today. Each card below renders the declaration it shows — the preview and the copy button use the same string, so nothing drifts between the demo and your stylesheet. Load any of them into the generator at the bottom of the page to retune it.

Cards and panels

Subtle card raise

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
  0 4px 12px -2px rgba(0, 0, 0, 0.08);

Floating panel

box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08),
  0 12px 28px -8px rgba(0, 0, 0, 0.14);

Material-style three-layer stack

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 12px 24px rgba(0, 0, 0, 0.08);

Buttons and inputs

Primary button

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
  0 4px 12px -2px rgba(0, 0, 0, 0.12);

Input well (inset)

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
  inset 0 2px 6px rgba(0, 0, 0, 0.06);

Pressed button (inset)

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

Rings, focus, and glow

Focus ring (two-layer)

box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(217, 122, 63, 0.55);

Brand glow

box-shadow: 0 0 0 1px rgba(217, 122, 63, 0.25),
  0 8px 32px -8px rgba(217, 122, 63, 0.45);

Dark surface lift

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45),
  0 16px 40px -12px rgba(0, 0, 0, 0.6);

The dark-surface example raises the alpha on purpose: black-on-black has no contrast, so shadows on dark UI routinely need two to three times the opacity they need on white. If a shadow vanishes when you switch themes, alpha is the first knob to turn.

Go deeper

box-shadow syntax & values — What each part of the declaration does, with practical starting ranges.
Multiple box-shadows — How to build the two- and three-layer stacks used above.
Values real websites ship — Measured offsets, blur, spread, and alpha from the top 1,000 sites.

What You Can Do

Start from a working shadow — Copy an example as-is for a quick result, or load it into the generator to tune alpha, blur, and offsets.
Match a component pattern — Cards, buttons, inputs, rings, and glows each have a dedicated starting point here.
Adapt across themes — Light and dark stage backgrounds show how the same shape reads on different surfaces.

How to Use

Find the example whose depth matches your component.
Copy the declaration — the preview and the copied text are the same string.
Paste it into your stylesheet, or load it in the generator below and adjust it first.
Pair rounded corners with the Border Radius Generator so the shadow silhouette matches the surface.

Frequently Asked Questions

How do I copy an example?

Use the Copy button on any example card. It writes that card's declaration — exactly what the preview applies — to your clipboard, ready to paste into a stylesheet.

Can I edit these shadows before copying?

Yes. Open the generator below, paste the declaration into its import field (or load a preset), and adjust offsets, blur, spread, opacity, and color with live preview before copying the result.

Why does my shadow look wrong on a dark background?

Dark surfaces swallow low-alpha black shadows. Raise the alpha — often to two or three times the value you use on white — or tint the shadow. The dark-surface example on this page shows a pair of values that read on #191D18.

Are these examples production-ready?

Yes — they use only standard box-shadow syntax with no prefixes, and their values sit inside the ranges real sites ship. Adjust the alpha to your own background and component size.

Related Tools

CSS Box Shadow Generator — Design layered, inset, or soft CSS shadows.
Border Radius Generator — Design asymmetric corners and blobs.
Gradient Generator — Design multi-stop CSS gradients.
Contrast Checker — Verify WCAG color contrast compliance.