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

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 for most content cards.

Lifted hover state

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

Transition from a small to a larger shadow on hover. Combined with a slighttransform: translateY(-2px), this creates a convincing floating effect.

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 definition and a soft distant shadow for depth. The close shadow defines the edge; the far shadow creates atmosphere.

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 outline ring around the element. Used for keyboard focus indicators and active states.

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.

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 a ::after pseudo-element with position: absolute and transition its opacity instead. Opacity changes are GPU-composited and skip the paint step.
• will-change: box-shadow: Hints to the browser to promote the layer ahead of time. Use sparingly — it consumes GPU memory.
• filter: drop-shadow(): An alternative that applies to the actual shape of the element (including transparency), not its bounding box. Useful for non-rectangular elements.

Common Questions

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

box-shadow applies to the element's rectangular bounding box. 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.

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.

Does box-shadow work on all elements?

Yes, including input, textarea, button, andimg elements. It does not apply to inline elements like spanunless they are displayed as block or inline-block.