🌫️

CSS Box Shadow Generator

Visually adjust offsets, blur, and spread to build the perfect CSS shadow.

How to Generate a CSS Box Shadow?

Adding a drop shadow to your web elements creates a sense of depth and hierarchy, making your UI feel interactive and layered. Our free CSS Box Shadow Generator lets you dial in the exact lighting values you need:

  1. Adjust the Offsets: Use the X and Y sliders to move the shadow horizontally and vertically, simulating the angle of your virtual light source.
  2. Tweak Blur and Spread: Increase the blur to soften the shadow edges, and use the spread slider to expand or shrink the shadow's overall size.
  3. Mix Your Colors: Pick a shadow color and dial back the opacity slider so it blends smoothly into your background color.
  4. Copy and Deploy: The CSS box updates in real-time. Hit "Copy CSS Code" and paste it directly into your project's stylesheet!

Frequently Asked Questions (FAQ)

What is an inset shadow?

A standard box shadow appears outside the element, making it look like it is floating above the page. An inset shadow renders inside the element's border, creating an illusion that the element is pressed or stamped down into the page.

Is this CSS code cross-browser compatible?

Yes! The CSS output generated uses the standard box-shadow property, as well as the older -webkit-box-shadow prefix to ensure maximum compatibility across modern browsers like Chrome, Safari, Firefox, and Edge.