CSS Box Shadow Generator

Shadows Are How Interfaces Fake Depth — Get Yours Right

Every floating card, raised button and hovering dropdown on the modern web creates its illusion of depth with one CSS property: box-shadow. It takes five values — horizontal offset, vertical offset, blur, spread and color — and the difference between an elegant elevation and a smudgy gray box lives entirely in how those numbers relate. This generator lets you find the right relationship visually: drag sliders, watch a sample card respond in real time, then copy the exact CSS. No guessing, no reload-and-squint cycles.

The Five Values, Demystified

• Horizontal & vertical offset position the shadow. Real-world light comes from above, so realistic UI shadows use zero horizontal and a small positive vertical offset — the element appears lit from the top.
• Blur radius softens the edge. More blur reads as the object floating higher; razor-sharp shadows read as stickers, not elevation.
• Spread grows or shrinks the shadow before blurring. Negative spread is the professional's trick: it tucks the shadow under the element so it peeks out subtly instead of haloing.
• Color & opacity decide weight. The single most common amateur mistake is pure black at high opacity; real shadows are soft and translucent — black at 8–25 percent opacity, or better, a darkened tint of the background color.

How to Use the Generator

1. Adjust the sliders and watch the preview card update live.
2. Set the shadow color and opacity with the picker and alpha slider.
3. Toggle inset to flip the shadow inward — the recessed look of pressed buttons and input wells.
4. Add a second layer: stacked shadows (one tight and dark, one broad and faint) are how mature design systems achieve realism a single shadow cannot.
5. Copy the generated box-shadow rule when the preview looks right.

Recipes That Survive Production

Standard card: 0 1px 3px rgba(0,0,0,0.12) — barely there, but the card lifts off the page. Hover elevation: transition to 0 6px 16px rgba(0,0,0,0.15) and the card appears to rise toward the cursor; animating shadow on hover is the cheapest delight in CSS. Modal/popover: 0 10px 40px rgba(0,0,0,0.2) — high blur and offset signal “floating above everything”. Subtle inset well: inset 0 2px 4px rgba(0,0,0,0.06) for input fields. Layered realism: combine 0 1px 2px rgba(0,0,0,0.24) with 0 8px 24px rgba(0,0,0,0.12) — the tight layer grounds the element, the soft layer gives ambience.

Consistency Is the Real Skill

A polished interface rarely showcases impressive individual shadows; it uses a small, consistent scale of them — typically three or four elevation levels applied uniformly, so equal importance means equal depth everywhere. Build your levels in this generator, name them (sm, md, lg), store them as CSS variables, and resist inventing new shadows per component. One more professional habit: shadows multiply visual weight quickly, so when a design feels heavy, reducing shadow opacity by five points often does more than redesigning components. The generator runs fully in your browser; the code it emits is standard, unprefixed CSS that works in every modern browser without vendor variants.

A final reality check: judge shadows on the background they will actually sit on. The same box-shadow reads very differently on white, on a tinted section and on a dark theme — which is why this generator renders its preview card on a neutral gray you can mentally map to your design. When a shadow that looked perfect in isolation turns muddy in context, the background changed, not the shadow.