CSS Box Shadow Generator
Dial in offset, blur, spread, color and inset for one or more box-shadows and copy the CSS.
Results are provided as is, for general information. Check anything important before relying on it. See the Terms of Use.
About this tool
box-shadow paints one or more shadow layers around (or, with inset, inside) an element, each layer defined by a horizontal and vertical offset, a blur radius, a spread, a color, and whether it's inset. This tool exposes all five per layer, supports stacking multiple layers (a common trick for soft, realistic-looking shadows — layering a tight dark shadow with a wide soft one reads better than either alone), and keeps a live preview and a ready-to-paste `box-shadow: …;` declaration in sync as you adjust. Runs entirely in your browser.
When to use it
Questions
What's the difference between blur and spread?
Blur radius feathers the shadow's edge — 0 gives a hard-edged rectangle (or the element's exact shape), larger values spread the edge into a soft gradient. Spread grows or shrinks the shadow's shape itself before blur is applied — positive spread makes the shadow larger than the element on every side, negative spread makes it smaller (useful for a tight shadow that sits mostly under the element rather than around it).
Why would I stack multiple shadow layers instead of using one?
A single shadow with a large blur looks flat and slightly unnatural, because real-world shadows aren't one uniform blur — they have a sharper, darker area close to the object and a softer, lighter falloff further out. Stacking a small-offset/small-blur/higher-opacity layer with a larger-offset/larger-blur/lower-opacity layer approximates that and is the basis of most 'elevation' shadow systems in modern design systems.
What does 'inset' actually change?
A normal box-shadow is cast outward from the element's border edge, as if a light source were in front of the element. inset flips it: the shadow is drawn inside the element's border, as if the element were a recessed hole — the standard technique for a pressed button or an indented input field. Everything else (offset, blur, spread, color) works identically either way.
Can blur or spread be negative?
Spread can — a negative spread shrinks the shadow's shape before blurring, which combined with a larger blur is exactly how you get a soft shadow that doesn't extend past the element's sides. Blur cannot: CSS treats a negative blur radius as invalid and this tool clamps it to 0, which renders as a hard edge (same as blur: 0).
Why does my shadow look too dark or too intense?
Solid black at full opacity is rarely what a real shadow looks like — most design systems use black at roughly 10-25% opacity, or a very dark version of the surface's own hue rather than pure black. This tool's color picker produces opaque hex colors only (the browser's native color input has no alpha channel); paste the generated CSS and change the color to an `rgba()` value by hand for a softer, more realistic shadow.
Do box-shadow layers affect layout or hit-testing?
No — a shadow never affects the element's box model (it doesn't push adjacent elements) and, by default, isn't clickable or hoverable; it's purely a paint effect drawn outside (or inside, with inset) the border. This makes it safe to add or animate without triggering layout reflow, which is why animating box-shadow is comparatively cheap next to properties that do affect layout.
box-shadow vs filter: drop-shadow() — which should I use?
box-shadow always follows the element's box (its border-radius included, but always rectangular/rounded-rectangular); filter: drop-shadow() follows the actual rendered alpha shape of the content, including a non-rectangular PNG/SVG's silhouette, and can be applied to an image with transparency to get a shadow that hugs the visible pixels rather than the image's bounding box. For ordinary cards, buttons and panels, box-shadow is simpler and usually what you want; reach for drop-shadow() specifically for irregularly-shaped content.
Does adding many shadow layers hurt rendering performance?
A handful of layers (the common case — two or three for a layered look) has negligible cost on modern browsers, since box-shadow is GPU-composited in most engines. The case to watch is animating box-shadow on many elements at once or on a very large element, since a shadow's blur repaints a comparatively large surrounding area every frame; animating opacity or transform on a pseudo-element that holds the shadow is the standard workaround if that shows up as jank.