CSS Box Shadow Generator

Shadows Are Depth, Not Decoration

A good box-shadow is the difference between a flat rectangle and an interface element that feels like it sits above the page. The CSS box shadow generator lets you dial in that depth visually — drag sliders, pick colors, flip the inset switch — and watch a real card respond instantly. When it looks right, copy the exact CSS. No guessing pixel values, no reloading a dev server to check a tweak.

The Five Values You Control

The box-shadow property is deceptively simple. It reads as four lengths plus a color:

box-shadow: h-offset v-offset blur spread color;

• Horizontal offset — moves the shadow left (negative) or right (positive).
• Vertical offset — moves it up (negative) or down (positive). Most natural shadows sit slightly below the element.
• Blur radius — how soft the edge is. 0 is a hard-edged shadow; larger values feather it.
• Spread radius — grows the shadow with a positive value or pulls it in with a negative one.
• Color — output as rgba() so the opacity slider can set transparency.

A Worked Example: A Modern "Lifted Card"

Say you want the subtle, elevated card shadow you see on premium SaaS dashboards. Here's the recipe the generator builds:

1. Set horizontal to 0 and vertical to 20px — the light comes from straight above, so the shadow falls directly downward.
2. Push blur up to 40px for a soft, diffuse edge.
3. Set spread to -12px. The negative spread tucks the shadow in tight behind the card so it doesn't bleed out the sides.
4. Pick a shadow color of #1e293b (a desaturated slate, not pure black — pure black reads as muddy) and drop opacity to about 25%.

The output is:

box-shadow: 0px 20px 40px -12px rgba(30, 41, 59, 0.25);

That single line is what gives a white card on a light-grey backdrop its convincing "floating" feel. Switch the backdrop color in the preview and you'll see why a slate-tinted shadow blends far better than #000000.

Inset Shadows: Pressing In Instead of Lifting Up

Toggle Inset and the shadow flips to the inside of the element. This is how you fake a recessed input field or a pressed button. Try inset 0px 2px 4px 0px rgba(0,0,0,0.15) on a text field for a clean, carved-in look. Combine an inset highlight at the top with an inset shadow at the bottom and a flat box suddenly looks tactile.

Why the rgba Output Matters

Beginners often write box-shadow: 5px 5px 5px black;. It works, but it looks like a sticker — a hard, opaque smear. Real shadows are translucent, so light from the background shows through. This tool converts your hex color and opacity percentage into proper rgba(), and the readout panel also shows the equivalent HSL values plus the contrast ratio between your card and its backdrop, so you can confirm text on the card stays readable (WCAG AA needs 4.5:1).

Tips for Believable Depth

• One light source. Keep the vertical offset positive and horizontal near zero across your whole UI so every shadow agrees on where the light is.
• Bigger element, bigger blur. A modal needs a far larger, softer shadow than a button.
• Tint, don't blacken. A shadow colored toward your background's hue looks more natural than neutral black.
• Layer for realism. Stack a tight, dark shadow over a wide, faint one for genuine elevation.

When you're done styling, pair this with the JSON formatter for tidying design tokens, or the data visualizer to preview your themed components in context.