Box Shadow Generator

Adjust the sliders to build a drop shadow or inset shadow on the preview box, then copy the generated box-shadow CSS. Control horizontal and vertical offset, blur radius, spread radius, color and opacity — no need to remember argument order or convert colors to rgba() by hand.

What Is This Tool?

box-shadow is the CSS property that draws a shadow behind (or inside) an element. Written by hand it takes up to five values in order — horizontal offset, vertical offset, blur radius, spread radius, and a color — plus an optional inset keyword, all of which is easy to mix up or get too subtle/too heavy on the first try.

This tool turns that into direct manipulation: drag a slider, watch the shadow change on the live preview box, and copy the exact CSS once it looks right. The color picker plus an opacity slider generates a proper rgba() value automatically, since transparent shadows generally look better than fully opaque ones.

Why Use It?

Live preview updates instantly as you adjust any control — see the exact shadow before you commit to code.
Full control over offset-x, offset-y, blur, spread, color and opacity in one place.
One click adds inset for a pressed-in / recessed look instead of a floating drop shadow.
Outputs ready-to-paste CSS with the color already converted to rgba() at your chosen opacity.
Runs entirely in your browser — nothing you configure is uploaded anywhere.
Free, no signup, works on mobile.

How to Use

Set offset-x and offset-y to position the shadow — positive values push it right/down, negative values push it left/up.
Increase blur radius to soften the shadow's edge; increase spread to make the shadow larger than the element itself.
Pick a color and adjust opacity — most realistic shadows use 15–40% opacity rather than solid black.
Check 'inset' if you want the shadow to appear inside the element's border instead of behind it.
Copy the generated CSS and paste it into your stylesheet.

Example

Input

Offset: 0px, 10px · Blur: 20px · Spread: 0px · Color: black at 35% opacity

Output

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

A soft shadow directly below the element with no horizontal offset — one of the most common card/button shadow styles.

Single shadow vs. layered shadows

This tool builds a single shadow layer, which covers the vast majority of real-world use — buttons, cards, modals and dropdowns almost always use one shadow. CSS does support comma-separated multiple shadows on the same element for more elaborate depth effects (e.g. a tight, dark shadow layered under a soft, wide one), but that's a refinement you can add by hand: generate one shadow here, then duplicate the line, adjust the second set of values, and join them with a comma.

Common box-shadow patterns

Subtle card lift: small offset (0–4px), moderate blur (8–16px), 10–20% opacity black.
Elevated modal/dropdown: larger offset (4–10px) and blur (20–30px), 20–35% opacity for a stronger sense of floating.
Pressed/inset button: check inset, use a small negative-feeling offset and moderate blur so the shadow reads as a dent rather than a lift.
Colored glow: pick a brand color instead of black, raise opacity to 40–60%, and increase spread slightly for a soft glow effect around buttons.
Sharp/hard shadow: set blur to 0 and spread to 0 for a solid, offset silhouette rather than a soft shadow.

Pairing with rounded corners

Shadows and rounded corners are used together constantly — cards, buttons and modals almost always combine both. Use the Border Radius Generator to round the same element's corners, then apply both generated CSS declarations together.

→ Border Radius Generator · Unit Converter

Frequently Asked Questions

What's the difference between blur and spread?

Blur radius softens the shadow's edge — higher values make it fade out more gradually. Spread radius changes the shadow's size before blurring — a positive spread makes the shadow larger than the element on all sides, a negative spread shrinks it. Most everyday shadows use blur with spread left at 0.

Why use rgba() instead of a plain hex color for the shadow?

A fully opaque shadow looks harsh and unrealistic — real shadows are always somewhat transparent, letting whatever is behind them show through slightly. rgba() lets you set that transparency directly, which is why this tool always outputs the color with an alpha value rather than a solid hex.

What does the inset keyword do?

Without inset, the shadow is drawn outside the element's border, as if the element is floating above the page. With inset, the shadow is drawn inside the border instead, making the element look pressed in or recessed — commonly used for active/pressed button states or input fields.

Can I stack more than one shadow on the same element?

Yes — CSS box-shadow accepts a comma-separated list, and browsers render them in the order given (the first shadow is on top). A common technique layers a tight, darker shadow with a wider, softer one for more realistic depth than either alone provides.

Does box-shadow affect layout or just appearance?

Appearance only — box-shadow never affects the element's size or the position of surrounding elements, even with large blur or spread values. If the shadow gets visually clipped, check for overflow: hidden on a parent element rather than the shadow's own values.