CSS Box Shadow Generator Online — Shadow Design Guide

How to Build a CSS Box Shadow

1. Open the CSS Box Shadow Generator
2. Drag the Offset X slider — positive values move the shadow right, negative left
3. Drag Offset Y — positive values move it down (most common for drop shadows)
4. Set the Blur Radius — 0 gives a sharp edge; higher values create a softer spread
5. Adjust Spread Radius to expand or contract the shadow size
6. Pick a shadow color — use rgba with low opacity for realistic shadows
7. Enable Inset to render the shadow inside the element
8. Click Copy CSS and paste into your stylesheet

Understanding Box Shadow Parameters

The Physics of Realistic Shadows

Effective shadow design comes from understanding how real-world shadows behave under consistent lighting. Three principles guide all good shadow work:

• Light source consistency: All shadows on a page should imply the same light source — typically slightly above and to the left of center. Mixing shadows that imply different light directions creates visual incoherence. The most common direction is offset-y positive (shadow below) to imply light from above.
• Elevation and distance: Objects closer to the surface cast darker, sharper, closer shadows. Objects far from the surface cast lighter, softer, larger shadows. This is why hover states typically increase the shadow blur and decrease the opacity simultaneously.
• Color and opacity: Real shadows are not pure black — they are tinted by the ambient light and the surface they fall on. Use rgba(0, 0, 0, 0.06–0.20) rather than #000. Very dark shadows (opacity above 0.25) look heavy and unnatural on most backgrounds.

Common Shadow Design Patterns

Subtle card elevation

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Small Y offset, moderate blur, very low opacity. Looks natural on white cards over a light gray background. The standard starting point for most content cards.

Lifted hover state

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

Transition from a small to a larger shadow on hover, combined with a slight upward translation — creates a convincing floating effect. The transform reinforces the elevation change the shadow implies.

Layered realistic shadow (Material Design style)

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 12px rgba(0,0,0,0.08);

Two shadows stacked: a sharp, close shadow for edge definition and a soft, distant shadow for depth. The close shadow gives the card its boundary; the far shadow creates atmosphere and a sense of height.

Focus ring / glow

box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);

Zero offset, zero blur, positive spread — this creates a solid-colored ring around the element. Use this pattern for keyboard focus indicators and active states. It is more accessible than the browser default outline (which can be hidden by UI redesigns) and supports border-radius.

Inner pressed button

box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);

Inset shadows make an element look recessed or pressed. Use on :activestate of buttons to simulate physical depression. The shadow appears inside the element's boundaries rather than outside.

Colored brand shadow

box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);

Using a color tinted to match your brand makes shadows feel deliberate rather than generic. Works best on elements with a solid background color that matches the shadow hue. This technique is widely used in modern SaaS product marketing sites.

Elevation System — A Design Token Approach

Design systems typically define a consistent set of shadow levels that map to visual elevation. This ensures all cards, modals, and tooltips imply the same light model:

Performance Considerations

box-shadow triggers a paint operation when it changes. This is fine for hover states on low-density pages, but for animated shadows on many elements simultaneously, consider these optimizations:

• Pseudo-element trick: Place the shadow on an ::after pseudo-element with position: absolute; z-index: -1 and transition its opacity instead. Opacity changes are GPU-composited and skip the paint step entirely.
• will-change: box-shadow: Hints to the browser to promote the layer ahead of time. Use sparingly — it consumes GPU memory and should only apply to elements that are actively animating.
• filter: drop-shadow(): An alternative that applies to the actual shape of the element (including transparency), not just its bounding box. Useful for non-rectangular elements and PNG images with transparent backgrounds.

Common Questions

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow applies to the element's rectangular bounding box — even if the element has a transparent background. filter: drop-shadow() applies to the actual rendered shape, including transparency. For a PNG image with a transparent background, drop-shadowfollows the visible pixels; box-shadow shadows the rectangle regardless of what is transparent.

Can I have multiple box shadows?

Yes — separate each shadow with a comma. Shadows are rendered front-to-back (first in the list is on top). This lets you stack a close sharp shadow and a far soft shadow for realistic depth, or combine a drop shadow with a focus ring on the same element.

Does box-shadow affect layout?

No. box-shadow does not affect the element's box model or layout. It paints outside (or inside with inset) the element without shifting any other content. This is different from outline, which also does not affect layout, and border, which does.