Fast, practical, browser-based developer tools
Create CSS box shadows with live preview, copy-ready CSS, and inset support. Adjust horizontal offset, vertical offset, blur radius, spread radius, color, and inset mode to build shadows for cards, buttons, inputs, containers, and other interface elements.
Box shadows are widely used to create depth, focus, layering, and hierarchy in modern interface design. A good shadow can make cards feel elevated, buttons feel clickable, and panels feel more structured. This tool helps you build those shadows faster by letting you adjust the main values visually and copy the finished CSS immediately.
This box shadow generator is designed to work directly in your browser. That means your selected values and generated CSS can be handled locally on your device during the normal workflow.
For more details about site usage and analytics, read our Privacy Policy.
Adjust the shadow controls until the preview matches the look you want. Then copy the generated CSS and paste it into your stylesheet, component, or design system.
box-shadow: 0px 16px 35px 0px #000000;
The box-shadow syntax is
offset-x offset-y blur spread color, and the two size values do genuinely
different jobs. Blur is the feather: it softens the shadow's edge over that
distance without changing where the shadow sits. Spread changes the shadow's
size before the blur is applied — a positive spread grows the shadow outward in every
direction, a negative spread pulls it inward.
Negative spread is the underused one. Because it shrinks the shadow, pairing it with a
downward offset produces a shadow that only peeks out of the bottom edge — the tight,
grounded look real design systems use — instead of a halo leaking out of all four sides. For
example box-shadow: 0 8px 12px -6px rgba(0,0,0,.4) reads as "8px down, soft, but
pulled in 6px" so the sides stay clean. Layering a large-blur/large-negative-spread shadow
under a smaller tighter one is how the popular "elevation" ramps get their realism.
You can give one element a comma-separated list of shadows, and they render as independent layers. The order matters: the first shadow in the list paints on top, later ones behind it. That is what lets you stack a crisp 1px contact shadow over a broad ambient one, or combine an outer glow with an inner highlight, all on a single element without extra markup.
Adding the inset keyword flips a shadow to draw inside the element's
padding box instead of outside it, which is how you get pressed-button and inset-field
effects. Inset and outset shadows can coexist in the same list. One subtlety people miss: an
inset box-shadow sits above the background but below the element's content and
border, so it will not darken text — but it can be hidden by an opaque background image
painted over it.
box-shadow directly
This is the performance trap that ships to production constantly: a card that grows its shadow
on :hover by transitioning box-shadow. It works, but it is expensive.
box-shadow is a painted property, so animating it forces the browser to
repaint the shadow on every single frame of the transition. On a large
element, or several at once, that is where hover jank comes from.
transform and opacity are the cheap properties — the compositor can
animate them on the GPU without repainting. The standard fix is to paint the "hover" shadow on
a pseudo-element that sits behind the card at opacity: 0, and transition only its
opacity to 1 on hover. The shadow appears to grow and soften, but the browser is
just cross-fading a layer it already rasterised, not recomputing the shadow each frame. If you
also want the lift, animate transform: translateY(-4px) rather than nudging
offsets.
Two properties of box-shadow make it behave unlike a border. First,
the shadow automatically follows the element's border-radius — round the corners
and the shadow rounds with them, no extra work. Second, and more importantly, a box-shadow
takes up no layout space. It is painted outside the box without affecting the
box model, so adding or animating it never shifts neighbouring elements.
That is exactly why box-shadow is the right tool for focus rings and selection
outlines: box-shadow: 0 0 0 3px rgba(59,130,246,.5) draws a solid ring that hugs
the rounded corners and causes zero layout shift, whereas switching a border on and off would
reflow everything around it. outline also avoids layout shift but historically
ignored border-radius (only recently fixed in browsers), which is why the
box-shadow ring became the common pattern.
Blur feathers the shadow's edge over a distance without moving it. Spread resizes the shadow before the blur is applied — positive grows it outward, negative shrinks it inward. A negative spread with a downward offset gives a tight shadow only under the element rather than a halo on all sides.
box-shadow hover animation janky?
box-shadow is a painted property, so transitioning it repaints the shadow on
every frame. Instead, put the hover shadow on a pseudo-element and transition its
opacity, and use transform for any lift. Those run on the
compositor without repainting.
Yes — give box-shadow a comma-separated list. They stack as layers with the
first one on top. You can mix outset and inset shadows in the same list, which
is how layered "elevation" effects are built on a single element.
inset keyword do?It draws the shadow inside the element instead of outside, creating recessed or pressed looks. An inset shadow paints above the background but below the content and border, so it shades the interior without darkening text.
No. Unlike a border, box-shadow occupies no layout space — it is painted
outside the box model. That is why it is ideal for focus rings and hover effects that must
not cause layout shift.
Yes. A box-shadow automatically follows the element's border-radius, so
rounding the box rounds the shadow to match with no additional CSS.