CSS Box Shadow Generator

Create browser specific border radius instantly

Horizontal Offset: 10 pxVertical Offset: 10 pxBlur: 10 pxSpread: 3 px

Background Color: #ffffff

Box Color: #2b7fff

Shadow Color: #cccccc

Inset

CSS


      box-shadow:  10px 10px 10px 3px #cccccc;
      -webkit-box-shadow:  10px 10px 10px 3px #cccccc;
      -moz-box-shadow:  10px 10px 10px 3px #cccccc;


      box-shadow:  10px 10px 10px 3px #cccccc;
      -webkit-box-shadow:  10px 10px 10px 3px #cccccc;
      -moz-box-shadow:  10px 10px 10px 3px #cccccc;

Tailwind CSS

shadow-[10px_10px_10px_3px_#cccccc]

shadow-[10px_10px_10px_3px_#cccccc]

Enhance your web design with stunning, customizable shadows using our Box Shadow Generator. Whether you're a frontend developer, designer, or hobbyist, this tool helps you effortlessly create pixel-perfect CSS box shadows in real time.

With a live preview and easy-to-use sliders, you can tweak every aspect of your shadow — from horizontal and vertical offsets to blur radius, spread, and color. Want inner shadows? No problem. Just toggle the inset option to switch between outer and inner shadows.

Why Use Our Box Shadow Generator?

🎯 Real-time Preview: Instantly see how your box shadow looks as you adjust values.
🧪 Customizable Options: Modify horizontal/vertical offset, blur, spread, color, opacity, and more.
💾 One-Click Copy: Quickly copy the generated CSS box-shadow code to your clipboard.
🌓 Dark Mode Support: Seamlessly design for both light and dark themes.
🔥 No Login Required: Use it for free—no sign-up, no ads, just pure functionality.

This tool is perfect for:

Designing card layouts
Creating depth in UI elements
Styling containers, buttons, and components
Improving user interface with smooth visual effects