CSS Box Shadow Generator

CSS box shadows are one of the most powerful tools for creating depth, elevation, and visual hierarchy in web interfaces. A well-crafted shadow can make a card feel like it floats above the page, give a button a subtle three-dimensional quality, or highlight a modal dialog as a distinct layer above the content. Yet box shadows are often applied haphazardly — too harsh, too opaque, or inconsistently used across a UI. This guide covers everything you need to create beautiful, believable shadows.

Understanding the Box Shadow Syntax

The CSS box-shadow property accepts values in this order: offset-x offset-y blur-radius spread-radius color. Optionally, the keyword inset can be prepended to create an inner shadow. Multiple shadows can be applied to a single element by separating them with commas — shadows are rendered front to back, so the first value in the list appears on top.

Offset X and Y control the shadow's position relative to the element. Positive X moves the shadow right, negative moves it left. Positive Y moves it down (as if light comes from above), negative moves it up. Blur radius controls how soft the shadow edges are — 0 creates a hard, solid shadow; higher values create progressively softer, more diffuse shadows. Spread radius expands or contracts the shadow beyond the element's bounds before blurring is applied.

The Art of Natural-Looking Shadows

The key to convincing shadows is low opacity and appropriate colour. In the real world, shadows are never pure black — they are the base surface colour darkened with a hint of the ambient environment's colour. For dark surfaces, shadows disappear. For white surfaces, shadows appear as a muted, slightly warm grey. Using rgba(0, 0, 0, 0.08) to rgba(0, 0, 0, 0.25) produces natural shadows at different elevation levels. Avoid opacities above 0.4 unless you are deliberately creating a dramatic or stylised effect.

Elevation System: Multiple Shadows for Depth

Material Design and many design systems use a layered shadow approach to convey different levels of elevation. A low elevation (like a card at rest) uses a small, tight shadow. A medium elevation (like a dropdown menu) uses a more diffuse shadow. High elevation (like a modal dialog) uses a large, soft shadow combined with a smaller accent shadow. In CSS this is achieved by separating two or more shadow values with a comma: box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.08).

Inset Shadows

Adding the inset keyword reverses the shadow direction — instead of projecting outward from the element, it projects inward. Inset shadows are used to create pressed or recessed button states, give text inputs a subtle sunken appearance, or create the illusion of a concave surface. Combining a subtle inset shadow with a regular outset shadow on the same element produces a rich, textured depth effect.

Coloured Shadows for Modern UI

Using a coloured shadow instead of a black/grey one is a popular modern design technique, particularly for buttons and cards. A purple button with a soft purple shadow creates a glow effect that reinforces the button's colour identity. The key is keeping the shadow colour close to the element's background colour or the button's own colour, with low opacity. This produces a halo-like glow without being garish.

Box Shadow vs. Filter Drop Shadow

CSS also has filter: drop-shadow(), which differs from box-shadow in one important way: it follows the actual shape of the element including transparent areas. For PNG images with transparent backgrounds, filter drop-shadow traces the image contour. For standard rectangular elements, both produce identical visual results. Use box-shadow for UI components and filter: drop-shadow() for non-rectangular image effects.

How to Use the Box Shadow Generator

Adjust the horizontal and vertical offset sliders to position the shadow, then increase blur for softness and spread to expand the shadow area. Select a shadow colour and set the opacity to taste. Enable inset to try an inner shadow effect. The live preview updates instantly, and the generated CSS can be copied with a single click and pasted directly into your stylesheet.