DevLab
#
CSS⭐ Popularbeginner

CSS Box Shadow Generator

build CSS box-shadow with live preview and copy-ready code

By Bikram NathLast updated

The box-shadow property accepts six values: h-offset, v-offset, blur, spread, color, and the optional inset keyword, and this generator exposes all of them with a live canvas preview. Input values like 4px 4px 12px -2px rgba(0,0,0,0.2) and you see the shadow contract inside its corners in real time. Negative spread, the least-obvious parameter, is where this visual approach pays off most.

Try it now — free, instant, no signup

What is CSS Box Shadow Generator?

CSS box-shadow paints one or more shadows behind or inside any element. This generator renders the result as you move sliders for horizontal offset, vertical offset, blur radius, spread radius, and color, then outputs a copy-ready declaration. Pushing spread to -4px while keeping blur at 8px, for example, produces a shadow that stays contained within the element's border-radius instead of bleeding outward.

Browser DevTools works when you already have a rough value and just need to nudge it. This generator is more practical when starting from zero because the sliders make non-obvious parameter relationships visible instantly. Dedicated alternatives like neumorphism.io exist for the neumorphic use case specifically, but they do not expose the full six-parameter surface that the plain box-shadow property accepts, including arbitrary spread and inset combinations.

One important edge case: the inset keyword moves the shadow inside the padding box, where it is clipped by overflow: hidden exactly as content is. Also, box-shadow does not affect layout at all. A 50px spread value does not push adjacent elements, which surprises developers who expect behavior similar to outline or margin.

When to use CSS Box Shadow Generator

✓Tune spread to a negative value when card shadows on dark backgrounds leak visibly past rounded corners.
→Combine two comma-separated shadows, one light and one dark, to create neumorphic depth without extra DOM elements.
⚡Add an inset shadow to a text input to signal focus state without depending on outline, which CSS resets often strip.

Frequently Asked Questions

What is the difference between box-shadow and filter: drop-shadow()?
box-shadow always follows the element's rectangular border box, ignoring any transparent areas inside it. filter: drop-shadow() from the CSS filter spec traces the element's actual alpha channel, so it works correctly on PNGs with transparent backgrounds or SVGs with cutouts. The practical rule: use box-shadow for block-level components like cards and buttons, and use filter: drop-shadow() when you need a shadow that follows a non-rectangular shape. The filter version accepts only three space-separated values with no spread parameter and cannot be set to inset.
Can I stack multiple shadows on one element, and in what order do they render?
Yes. The box-shadow property accepts a comma-separated list of shadow definitions, and they paint front to back: the first shadow in the list sits on top. A typical neumorphic card uses two shadows separated by a comma, one offset toward the light source in a lighter color and one offset away in a darker color. There is no browser-specified cap on the number of shadows, but performance degrades visibly past roughly 10 because each shadow is composited separately on every repaint.
Does animating box-shadow cause layout reflow?
Changing box-shadow values does not trigger layout reflow or shift surrounding elements because the shadow is painted outside normal flow. However, animating it via CSS transitions does trigger repaint on every frame since the browser must re-render shadow pixels each time. For GPU-smooth animations, a common pattern is to render the shadow on a ::before or ::after pseudo-element and animate that layer's opacity instead of the shadow values directly. This sidesteps per-frame repaint by letting the compositor handle the fade.
What does a negative spread radius actually do to the shadow shape?
A positive spread expands the shadow outward in all four directions before blur is applied. A negative spread shrinks it inward by that amount first. At blur: 8px and spread: -4px, the shadow hides behind the element near its edges and only shows at the bottom, producing a focused effect that reads as physically plausible depth. This is the parameter that separates flat-looking shadows from ones that appear to lift an element off the page, and it is the hardest value to calibrate without a live preview.
Why does my box-shadow look different in Safari compared to Chrome?
Rendering is nearly identical for standard rgba() values. Differences surface in two scenarios. First, very large blur radii above roughly 150px on wide elements can produce visible banding artifacts in Safari on iOS because of how it tiles composited layers. Second, if you use currentColor in a box-shadow declaration, older WebKit builds sometimes resolved it from the initial computed value rather than the inherited one, yielding a different color than Chrome. Both issues are avoidable by using explicit rgba() values and keeping blur radii below 100px on viewport-spanning elements.

Related Tools

CSS
CSS Gradient Generator
generate CSS linear, radial, and conic gradients visually
CSS
CSS Border Radius Generator
create complex CSS border-radius shapes with per-corner controls
CSS
CSS Filter Generator
combine CSS filter functions (blur, brightness, etc.) with live preview
CSS
CSS Animation Generator
build CSS keyframe animations with timeline editor and preview