CSS Box Shadow Generator

Just put the shadow inside a :hover selector and add a transition for smoothness: .card { transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); } The transition on the base class makes it animate smoothly when the cursor enters, instead of snapping in. Always declare the transition on the base, not on :hover — otherwise the shadow disappears instantly when the cursor leaves. If you want symmetric in/out animation, add a starting box-shadow: 0 0 0 transparent; on the base. Works great for buttons, cards, and image tiles.

Honestly, for most sites it's negligible. But heavy or animated shadows can hurt — especially large blur radii on big elements, since the browser has to do a Gaussian blur calculation across many pixels. The real cost shows up when you animate shadows on scroll or on many elements at once, because shadow isn't GPU-accelerated like transform. The fix: animate transform: scale() or opacity of a separate shadow layer instead, or use filter: drop-shadow(), which can be cheaper. For static shadows on a few cards, don't worry — performance is absolutely fine.

Set a transition on the box-shadow property, then change the shadow value in the :hover or :focus state: button { box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.25s ease; } button:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); } Use :focus-visible instead of plain :focus — it shows the ring only when the user is keyboard-navigating, not on every mouse click. Keep the duration short (200-300ms) so the UI feels responsive. Avoid animating very large shadows on heavy pages — it can stutter on low-end devices.

Quick walkthrough: offset-x moves the shadow horizontally (positive = right), offset-y moves it vertically (positive = down). blur softens the edges — 0 is a hard shadow, larger values fade it. spread grows or shrinks the shadow's size before blur is applied — positive makes it bigger than the element, negative pulls it inward. The syntax is box-shadow: x y blur spread color;. So box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2) gives a downward, soft, no-spread shadow — the classic "card lift" look. Our generator has live sliders for all four parameters.

Just use rgba() as the colour value. Instead of box-shadow: 0 4px 12px black;, write box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);. The fourth number is alpha — 0 is fully transparent, 1 is opaque. Subtle UI shadows usually sit between 0.08 and 0.25; anything higher starts looking heavy and amateurish. You can also use 8-digit hex notation: #00000033 is roughly 20% black. Modern CSS also supports hsla() and oklch() with alpha. Our generator's color picker gives you the alpha slider directly so you can dial it in visually.

Replace rgba(0,0,0,...) with the colour you want — for example, box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); gives a soft purple glow that feels modern and on-brand. Coloured shadows pair beautifully with the element's own colour: a blue button with a translucent blue shadow looks far more polished than a flat grey one. Keep the alpha low (0.2-0.4) so the colour reads as a glow rather than a halo. For neon or glassmorphism looks, layer multiple shadows: box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff80;.

Almost always one of two reasons: the parent has overflow: hidden, which crops anything (including shadows) painting outside the box; or the parent has border-radius plus overflow: hidden, which clips children to the rounded shape. Fix one: remove the overflow: hidden, or move the shadow up to the parent itself. Fix two: if you absolutely need overflow hidden (like for image carousels), use filter: drop-shadow() on the parent instead — it lives outside the clipping box. Also check transform contexts and contain properties; both can create new stacking that clips shadows.

Pixel values only — well, pixels and other absolute length units (em, rem, pt, cm). Box-shadow does not accept percentages for any of its length values (offset, blur, spread). If you need responsive shadows that scale with the element, use em or rem, or set CSS custom properties and recalculate them via JavaScript on resize. Another nice trick: use clamp() like box-shadow: 0 clamp(2px, 1vw, 12px) 24px rgba(0,0,0,0.15); for fluid responsive shadows. The colour value, of course, has its own rules. Our generator outputs px by default but you can edit.

Use the "Copy CSS" button on our Box-Shadow Generator — it copies the full box-shadow: ...; declaration to your clipboard, ready to paste anywhere. We also support copying as a Tailwind arbitrary value like shadow-[0_4px_12px_rgba(0,0,0,0.15)] if you toggle the format. Pro tip: define your shadows as CSS variables once, then reference them across your site: :root { --shadow-card: 0 4px 12px rgba(0,0,0,0.1); } .card { box-shadow: var(--shadow-card); } Now changing one value updates the whole site — much cleaner than scattering hex codes everywhere.