Box Shadow Generator

...
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);

About this Tool

Visually design complex CSS `box-shadow` effects. This generator provides sliders and color pickers to intuitively create the perfect shadow, then gives you the CSS code to copy and paste. It solves trial-and-error in CSS editing for shadows.

How does it work? Updates CSS property in preview element based on inputs, generates string like "x y blur spread color".

  1. Use the sliders to adjust the Horizontal and Vertical Offsets, Blur, and Spread.
  2. Adjust the opacity slider and choose a shadow color.
  3. Toggle the "Inset" checkbox to create an inner shadow.
  4. A live preview of the shadow will be shown on the example element.
  5. Copy the generated CSS code from the code box.
  • Designing card components in UI.
  • Adding depth to buttons.
  • Creating neumorphic effects.
  • Live visual feedback for all shadow properties.
  • Controls for offset, blur, spread, color, and opacity.
  • Support for both outset and inset shadows.
  • One-click copy of the generated CSS rule.

Box-shadow is CSS3 property for layered shadows. Concept mimics light and depth in 2D, with params for position, size, color.

Multiple shadows?

Not yet; comma-separated in future.

Browser compatibility?

CSS3 standard.

Units?

Pixels.

All calculations and data processing for this tool are performed locally in your browser. We do not send any of your data to our servers, ensuring your information remains private and secure.