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.

Last updated

Box Shadow Generator is a free, browser-based tool from UseToolSuite's Color & CSS Tools collection. All processing happens locally on your device — your data is never uploaded to any server. Use the tool below, then scroll down for detailed documentation, frequently asked questions, and related resources.

Advertisement
10px
10px
20px
0px
40%

Shadow Color

Pick shadow color

What is Box Shadow Generator?

Box Shadow Generator is a free online tool that lets you visually design CSS box-shadow effects using intuitive sliders and controls. You can adjust horizontal and vertical offsets, blur radius, spread radius, shadow color, and opacity in real time while seeing the result on a live preview box. It also supports inset shadows for inner glow effects. The tool outputs the complete CSS box-shadow property ready to copy and paste into your stylesheet, saving time compared to manual trial and error in your code editor.

When to use it?

Use the Box Shadow Generator when you need to create depth, elevation, or emphasis on UI elements like cards, modals, buttons, or dropdown menus. It is particularly helpful when experimenting with different shadow intensities and colors to match your design system. Instead of guessing pixel values and opacity levels, you can visually dial in the exact shadow you want and then grab the CSS code.

Common use cases

Developers and designers commonly use Box Shadow Generator to add subtle elevation to card components, create floating button effects with soft shadows, design inset shadows for pressed or recessed input fields, build layered shadow effects for modern glassmorphism designs, and prototype Material Design elevation levels. It is also used to generate consistent shadow tokens for design systems where every elevation level needs precise pixel-perfect values.

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.

How helpful was this tool?

Click to rate

Advertisement

Key Concepts

Essential terms and definitions related to Box Shadow Generator.

Box Shadow

A CSS visual effect that adds a shadow around an element's rectangular box. Defined by offset-x, offset-y, blur-radius, spread-radius, and color values. Box shadows do not affect layout — they are purely visual and are rendered outside (or inside with "inset") the element's border box.

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

Common errors developers encounter and how to resolve them.

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

In-depth articles covering the concepts behind Box Shadow Generator.

CSS Container Queries: The Complete Practical Guide

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

Advertisement

Related Tools

CSS Gradient Generator

Color & CSS Tools

Color Converter

Color & CSS Tools

Color Palette Generator

Color & CSS Tools