CSS Box Shadow Generator

What is a CSS box shadow generator?

A CSS box shadow generator is a visual tool that lets you design a drop shadow by eye and instantly get the box-shadow code to reproduce it. Instead of hand-writing a declaration and reloading the page to check the result, you drag sliders for offset, blur, spread, and opacity while a live preview updates in real time. When the shadow looks right, you copy the generated CSS and paste it straight into your stylesheet.

Shadows are one of the fastest ways to add depth and hierarchy to a web interface. Cards lift off the page, buttons feel pressable, modals float above their backdrop, and inputs look recessed — all driven by a single CSS property. Writing that property by hand is fiddly: it is easy to forget which number is the blur and which is the spread, to fumble a negative offset, or to pick an opacity that looks heavy on one background and invisible on another. This tool removes that friction entirely, and because it runs 100% in your browser, none of your work ever leaves your machine.

How to use this box shadow generator

1. Set the offset. Drag the X slider to move the shadow horizontally and the Y slider to move it vertically. Most natural shadows use a small positive Y (light coming from above) and little or no X.
2. Soften the edge. Increase Blur to fade the shadow out. A blur of 0 gives a hard, graphic edge; larger values give a soft, realistic falloff.
3. Size it with spread. Use Spread to grow (positive) or shrink (negative) the shadow. A small negative spread paired with a larger blur is the secret behind modern, subtle card shadows.
4. Pick a color and opacity. Choose a Color and dial the Opacity down — real shadows are rarely pure black at 100%. Something around 15–30% opacity reads as natural on most backgrounds.
5. Go inset if needed. Tick Inset to draw the shadow inside the element for a pressed or recessed look.
6. Layer it. Click Add layer to stack a second or third shadow for realistic depth. Remove any layer with the × button.
7. Copy the CSS. Hit Copy (or Ctrl+Shift+C) to copy the full box-shadow declaration. A ready-to-paste Tailwind arbitrary-value class is shown below the preview too.
8. Randomize for inspiration, or Clear (Ctrl+L) to reset.

Want to tweak a shadow you already have? Paste its CSS — for example 0 10px 15px -3px rgba(0,0,0,0.25) — into the input box and press Ctrl+Enter. The tool parses it back into editable layers so you can adjust it visually.

The box-shadow syntax explained

The box-shadow property takes up to four length values, a color, and an optional inset keyword, in this order:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x — how far the shadow moves horizontally. Positive pushes it right, negative pushes it left.
• offset-y — how far the shadow moves vertically. Positive pushes it down, negative pushes it up.
• blur-radius — how soft the edge is. 0 is a crisp edge; larger numbers spread the fade over more pixels. It cannot be negative.
• spread-radius — how much bigger or smaller the shadow is than the element, applied before the blur. Positive grows it, negative shrinks it.
• color — the shadow tint, usually an rgba() value so you can control opacity.
• inset — when present at the start, the shadow is painted inside the element instead of behind it.

Only offset-x and offset-y are strictly required; blur and spread default to 0, and the color defaults to the element’s color value. This tool always emits all four lengths and an explicit rgba() color so the result is unambiguous and copy-paste ready.

/* A soft, floating card shadow */
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);

/* A recessed input field */
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3);

Layering multiple shadows for realistic depth

Real objects rarely cast a single, uniform shadow, and the most convincing UI shadows do not either. CSS lets you comma-separate as many shadows as you like on one element, and stacking them is how designers imitate physical light:

box-shadow:
  0px 1px 2px rgba(0, 0, 0, 0.10),
  0px 4px 8px rgba(0, 0, 0, 0.10),
  0px 16px 24px rgba(0, 0, 0, 0.10);

The tight, low shadow anchors the element to the surface; the wider, softer layers suggest ambient light. Add a layer in the tool and adjust each one independently — the preview shows the combined result, and the generated CSS keeps every layer in one declaration.

Common box-shadow mistakes

• Confusing blur and spread. Blur softens the edge; spread resizes the whole shadow. Mixing them up gives a shadow that is either too hard or the wrong size. The labelled sliders here make the difference obvious.
• Using pure black at full opacity. rgba(0, 0, 0, 1) looks harsh and muddy. Real shadows are semi-transparent — drop the opacity so the background bleeds through.
• Forgetting units. Bare numbers other than 0 are invalid: it must be 10px, not 10. This tool always emits the px unit for you.
• Putting inset in the wrong place. The inset keyword belongs at the start of a shadow, before the offsets. Anywhere else and the browser ignores the whole shadow.
• Expecting spread on filter: drop-shadow. The drop-shadow() filter has no spread or inset. If you need those, you need box-shadow.

box-shadow vs filter: drop-shadow

Both cast shadows, but they are not interchangeable. box-shadow follows the element’s box — its border and border-radius — and supports inset and spread. filter: drop-shadow() instead traces the visible, non-transparent pixels, so it can shadow the actual shape of a transparent PNG, an SVG icon, or an element clipped with clip-path. For cards, buttons, modals, and any rounded rectangle, reach for box-shadow. For an irregular graphic where the shadow must hug the silhouette, use drop-shadow.

Using box shadows with Tailwind CSS

If you use Tailwind, you can drop any generated shadow straight into an arbitrary-value class. This tool shows the Tailwind snippet below the preview — copy something like shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.25)] and apply it to any element. (Note the underscores: Tailwind uses them in place of spaces inside arbitrary values.) For a shadow you reuse across a project, promote it into your tailwind.config.js under boxShadow and reference it as a named shadow-* utility instead.

Where box shadows shine

Shadows are everywhere in modern product design: elevated cards and dropdown menus, primary buttons that invite a click, sticky headers that separate from scrolling content, tooltips and popovers, and the soft, layered surfaces behind glassmorphism and neumorphism UI. Because they are pure CSS, they scale to any resolution with zero extra network requests — a real performance win over background images. Pair this generator with our CSS Gradient Generator for backgrounds, the Color Converter to fine-tune each shadow color across HEX, RGB, and HSL, and the CSS Beautifier to tidy up the stylesheet you paste the result into.

Once you settle on an elevation scale — say, a small, medium, and large shadow — reuse those exact values across every component. Consistent shadows are one of the quietest but most powerful signals of a polished, professional interface, and with a live generator, dialing them in takes seconds instead of a round-trip through your editor.