Free CSS Box Shadow Generator

Adding a beautifully styled shadow to an element instantly elevates your web design, creating depth, hierarchy, and a modern "floating" aesthetic. However, hand-coding the perfect shadow is tedious. Our free, interactive CSS Box Shadow Generator lets you visually craft beautiful shadows and instantly copies the cross-browser compatible CSS code for your project.

How to Use the Generator

1. Adjust Offsets: Move the Horizontal and Vertical sliders. Positive numbers push the shadow to the right and down; negative numbers push it to the left and up.
2. Set Blur & Spread: The Blur slider softens the edges of the shadow. The Spread slider increases or decreases the physical size of the shadow before the blur is applied (negative spread is great for subtle, floating card effects).
3. Choose a Color: Select your shadow color using the color picker, and dial in the perfect transparency using the Opacity slider (0.10 to 0.15 is highly recommended for modern, clean designs).
4. Toggle Inset (Optional): Check the "Inset" box to flip the shadow to the inside of the element, creating a sunken or pressed-in look.
5. Copy Your Code: Click the blue "Copy CSS" button. This copies the standard box-shadow rule alongside the -webkit- and -moz- fallbacks for maximum browser compatibility. Paste it directly into your stylesheet or Elementor custom CSS box!

Pro Design Tips for Shadows

• Keep it Subtle: The biggest mistake beginners make is using pure black with high opacity. For a modern, professional look, use an opacity between 0.05 and 0.15.
• Negative Spread is Magic: Setting a high vertical offset (e.g., 20px), a high blur (30px), and a negative spread (e.g., -10px) creates the ultra-popular "soft floating" card effect seen on top tech websites.
• Match the Theme: Instead of pure black, try tinting your shadow color slightly toward your brand's primary color (e.g., a very dark, transparent blue instead of black).