CSS

Box Shadow Generator

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

Result

CSS 

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

Related Tools

Set a shadow’s position, softness, and color

Adjust the offsets, blur, spread, color, and opacity while checking the preview. Copy the generated .element rule and replace its selector with the element you want to style.

What the controls change

  • X and Y offsets move the shadow horizontally and vertically. Negative values move it left or up.
  • Blur softens the edge. Spread expands the shape before blur is applied; a negative spread contracts it.
  • Opacity controls how strongly the shadow color blends with the background.
  • Preview background helps you judge the effect on another surface. It is not included in the exported CSS.

Example: a soft card shadow

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

This shadow sits 4px below the card, with no horizontal offset, a 16px blur, and 12% opacity. Test it on your actual page background; a shadow that is visible on white may disappear on a dark surface.

Output limits

The tool creates one outer shadow. To layer shadows, separate shadow values with commas; the first shadow is painted on top. Add inset manually for an inner shadow. Shadows do not reserve layout space and can be clipped by an ancestor’s overflow settings.

For the component itself, use the Button Generator or Border Radius Generator .

← Back to CSS Tools