🔍

🔳 CSS Box Shadow & Border-Radius Visual Editor

Visually design modern multi-layer CSS box shadows and individual corner border-radius curves with real-time preview and instant code copy. 100% free.

⚙️ Shadow & Radius Controls
#000000

👁️ Live Interactive Preview
Preview Box
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);\nborder-radius: 16px;
❓ Frequently Asked Questions

How do spread radius and blur radius differ in CSS box-shadow?

Blur radius determines how soft or fuzzy the edge of the shadow appears, while spread radius expands or shrinks the physical dimensions of the shadow shape before blurring.

Can I set different values for each individual corner's radius?

Yes, you can unlink the corner dimensions to specify unique values for top-left, top-right, bottom-right, and bottom-left individually.

Is the generated CSS code fully browser compatible?

Yes, standard box-shadow and border-radius declarations are universally supported across all modern browsers without required vendor prefixes.

🗓️ Updated 2026-08-22

Report a tool bug

You Might Also Like