UseToolSuite UseToolSuite

Box Shadow Generator

Generate CSS box-shadow code with interactive sliders. Adjust offset, blur, spread, color, and opacity visually with a live preview — copy CSS instantly.

10px
10px
20px
0px
40%

Shadow Color

Pick shadow color

Elevation system: designing with shadow depth levels

Modern design systems use shadow elevation levels to create visual hierarchy. Level 0 has no shadow (flat elements). Level 1 uses a subtle 0 1px 3px rgba(0,0,0,0.12) for cards. Level 2 adds more depth for dropdowns with 0 4px 6px rgba(0,0,0,0.1). Level 3 creates floating elements like modals with 0 10px 25px rgba(0,0,0,0.15). Material Design uses 6 elevation levels. Tailwind CSS provides shadow-sm through shadow-2xl. The key principle is consistency — once you define your elevation scale, every component should use the same shadow values.

The four numbers (plus a keyword)

A box-shadow is offset-x offset-y blur spread color, with an optional inset:

ValueControlsEffect
offset-x / yDirectionWhere the shadow falls
blurSoftness0 = hard edge, higher = diffuse
spreadSizeGrows (+) or shrinks (−) the shadow
colorTintUsually low-opacity black
insetInside vs outsideRecessed/inner shadow

The most underused of these is spread: a positive spread with zero blur and zero offset creates a solid outline that doesn’t affect layout, and a negative spread tightens a shadow so only part of it shows — handy for subtle bottom-only elevation.

Color the shadow, don’t just darken it

Flat-looking shadows are often pure black. Real shadows pick up the surface and ambient color, so a subtly tinted shadow (a dark version of the element’s hue, or a navy-tinted shadow on a blue UI) reads richer than rgba(0,0,0,0.5). Keep opacity low — 10–25% is the sweet spot for believable elevation; heavier shadows look heavy. The element can even cast a shadow in its own color for a glow effect by matching the shadow color to the element.

Two performance traps

  • Overflow clipping — box-shadow is drawn outside the box, so a parent with overflow: hidden (common on cards, carousels, modals) clips it. Either pad the container or move the shadow to a wrapper — or switch to drop-shadow(), which overflow doesn’t clip.
  • Animation jank — animating box-shadow directly forces a repaint every frame and stutters with large blur. Instead, put the “hover” shadow on a pseudo-element and animate its opacity (GPU-composited), or add will-change as a hint. The shadow appears to grow smoothly without the repaint cost.

Use the live preview here to tune offset, blur, and opacity, then layer a few of the generated shadows together for the realistic look described above.

Box Shadow Generator Powered by UseToolSuite — free browser tools

Last updated Built and maintained by Necmeddin Cunedioglu How tools are tested

How helpful was this tool?

Click to rate

Key Concepts

Blur Radius

The third value in a box-shadow declaration that controls how soft and diffused the shadow edge appears. A value of 0 creates a sharp shadow; higher values create progressively softer, more natural-looking shadows. The blur is applied using a Gaussian function, and the shadow expands by the blur radius in all directions.

Spread Radius

The fourth value in a box-shadow declaration that expands (positive) or contracts (negative) the shadow size relative to the element. A positive spread makes the shadow larger than the element; negative spread creates a smaller shadow. Combined with zero blur and zero offset, spread can create solid borders without affecting layout.

Frequently Asked Questions

Can I add multiple box shadows to the same element?

The tool generates a single box-shadow declaration. To combine multiple shadows, you can generate each shadow separately and comma-separate them in your CSS. Multiple shadows are applied in order, with the first shadow on top.

What is the difference between box-shadow blur and spread?

Blur radius controls how soft and diffused the shadow edge appears — higher values create a more gradual fade. Spread radius expands or contracts the shadow size relative to the element. A positive spread makes the shadow larger, while negative spread creates an inner shadow effect.

Does the tool support inset (inner) shadows?

The tool generates standard outer shadows. To create an inset shadow, you can add the "inset" keyword to the beginning of the generated CSS value. Inset shadows appear inside the element instead of outside.

Do box shadows affect page performance?

Box shadows are rendered by the GPU in modern browsers and have minimal performance impact for typical use. However, large blur radius values on many elements simultaneously can cause performance issues on low-end devices. Use shadows judiciously in scroll-heavy interfaces.

How do I make shadows look realistic instead of flat?

Stack multiple shadows instead of using one. A single box-shadow looks artificial because real shadows aren't uniform — they're darker and tighter near the object and softer farther out. Layer 3–5 shadows with progressively larger offsets and blur and progressively lower opacity: for example, 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07). The overlapping layers approximate how light actually falls off, producing the soft, premium elevation you see in good design systems. One big blurry shadow can't reproduce that — it's the layering that sells the depth.

When should I use filter: drop-shadow() instead of box-shadow?

Use filter: drop-shadow() when the shadow must follow the element's actual shape rather than its rectangular box. box-shadow always traces the border box (a rectangle, or a rounded rectangle with border-radius), so it can't shadow a PNG with transparency, an SVG icon, or a clip-path shape correctly. drop-shadow() reads the alpha channel and casts a shadow around the visible pixels — perfect for logos, icons, and cut-out images. It's also not clipped by a parent's overflow: hidden, which box-shadow is. The trade-offs: drop-shadow() has no spread parameter and you can only chain it via multiple filter functions, so for plain rectangular cards, box-shadow remains the right tool.

Troubleshooting & Technical Tips

Box shadow gets clipped: Interaction with overflow:hidden

Box shadow is drawn outside the element's box model, but a parent element with overflow:hidden or overflow:auto will clip the shadow. This commonly occurs in card layouts, slider/carousel components, and elements inside modals. Solution: leave sufficient padding around the shadowed element, or apply the shadow to a wrapper element instead of the content. Alternatively, you can use filter: drop-shadow() — this function is not affected by overflow, but it does not support the spread parameter.

Shadow color looks different across browsers: Color space and alpha blending

The color value of a box shadow specified with rgba() is blended onto the underlying background via alpha compositing. Different browsers' color management implementations can create slight differences. This is especially noticeable with low-opacity, large blur values. For consistent appearance, keep the shadow color at dark gray with 15-25% opacity (rgba(0,0,0,0.15)) — this produces the most reliable and premium-looking results. Use this tool's live preview to experimentally determine the ideal opacity.

Performance issue: Large blur values cause jank during animation

Box shadow animations (such as shadow growing on hover) trigger a repaint on every frame and can cause performance issues with large blur values (20px+). Solution: instead of animating box-shadow directly, animate the opacity of a shadow on a ::after pseudo-element — the browser composites opacity animations on the GPU, avoiding jank. You can also add will-change: box-shadow to give the browser advance optimization opportunity.

Related Guides

CSS Container Queries: The Complete Practical Guide

A practical guide to CSS container queries: defining containment, named containers, CQI/CQW units for fluid type, and debugging circular-dependency bugs.

Related Tools

CSS Gradient Generator

Color & CSS Tools

Color Converter

Color & CSS Tools

Color Palette Generator

Color & CSS Tools

Neumorphism Generator

Color & CSS Tools

Text Shadow Generator

Color & CSS Tools
Embed this tool on your site

Paste this snippet into any HTML page or blog post to embed a live, fully working copy of Box Shadow Generator. Free for any use.