CSS Box Shadow Generator

Generate CSS box shadow code with live preview. Adjust offset, blur, spread, color, and opacity with interactive sliders.

Shadow List
4px
4px
10px
0px
50%
Generated CSS

How It Works

  1. Open the generator and instantly see a live preview of your box shadow.
  2. Drag the horizontal and vertical offset sliders to position the shadow relative to your element.
  3. Adjust the blur radius and spread to control how soft and large the shadow appears.
  4. Pick a shadow color and set the opacity to match your design style.
  5. Copy the generated CSS code and paste it directly into your stylesheet.

Example

Input: Horizontal: 5px, Vertical: 10px, Blur: 15px, Spread: 2px, Color: #000000, Opacity: 0.5
Result: box-shadow: 5px 10px 15px 2px rgba(0, 0, 0, 0.5);

FAQ

Yes, the CSS Box Shadow Generator is completely free with no registration or account required.

Your data is completely safe. All processing happens client-side in your browser. No data is ever sent to any server.

Yes, CSS supports multiple box-shadow values separated by commas. Simply generate each shadow value and combine them in your CSS.

Yes, the box-shadow property is supported by all modern browsers without any vendor prefixes needed.

Yes, adding the 'inset' keyword to the box-shadow value makes the shadow appear inside the element rather than outside.