CSS

Box Shadow Generator

Adjust the controls and watch the shadow update live. Copy the CSS when it looks right.

CSS 
.element {
  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.75);
}

Related Tools

What is the CSS Box Shadow Generator?

The box-shadow property adds shadow effects around any HTML element — cards, buttons, modals, and inputs all benefit from a well-tuned shadow that conveys depth and elevation. This free online tool gives you sliders for every parameter and shows the result live, so you find the right values without guessing.

How to use it

Drag X Offset and Y Offset to position the shadow, then adjust Blur Radius to soften the edge and Spread to grow or shrink the shadow's footprint. Lower the opacity and pick a shadow color. When the preview looks right, click Copy CSS and paste the single declaration into your stylesheet.

Example

.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

Zero X offset, 4px below, 16px blur, 12% opacity — this is the standard subtle card shadow used across most modern design systems.

Tips and best practices

  • Keep opacity between 10–20% for light themes. Shadows look best when they're barely noticeable.
  • Pick one light direction for the whole page. Cards, buttons, and inputs should all share the same X/Y ratio.
  • Stack two shadows for realism: one tight and dark (contact shadow), one wide and faint (ambient shadow), separated by a comma.

Common mistakes

  • Using pure black at 100% opacity — it looks heavy. A 12–15% rgba value almost always looks more natural.
  • Keeping the same shadow on hover — a slightly larger shadow gives useful interactive feedback.
  • Inconsistent light directions across the page — mixing angles looks unpolished even when each shadow looks fine alone.

Frequently asked questions

Can I stack multiple box shadows?
Yes — separate values with a comma. The first value listed is painted on top.

Does box-shadow affect layout?
No. It's drawn outside the box model and never shifts other elements.

What's the difference between blur and spread?
Blur softens the shadow edge. Spread expands or contracts the shadow's entire size before blurring happens.

If you're styling a full component, the Button Generator designs the element itself, and the Gradient Generator builds a background to sit behind it.

← Back to CSS Tools