Developer

CSS BOX SHADOW

Create and preview CSS box shadows with offset X/Y, blur, spread, color, opacity, and inset controls.

Private by design No signup · Free

Shadow Layers

Layer 1

Inset

Offset X0

Offset Y0

Blur0

Spread0

Opacity100

Background

Shape

Presets

Shadow Library

No saved shadows yet.

Preview

CSS Output

Normal Hover

box-shadow: ...;

Animate Preview

Toggles between Normal and Hover shadow states to simulate a hover transition.

Frequently Asked Questions

कैसे बनाएं?

स्लाइडर घुमाएं — प्रीव्यू व कोड लाइव अपडेट होगा।

इनसेट क्या है?

अंदर की ओर शैडो — दबे हुए इफेक्ट हेतु।

मल्टी-लेयर?

हां। कई शैडो जोड़ें।

क्या मुफ्त है?

हां।

How to Use

मान सेट करें

X, Y, ब्लर, स्प्रेड।

रंग चुनें

रंग व ओपेसिटी।

कोड लें

CSS/Tailwind कॉपी।

How to Calculate

मानों से box-shadow स्ट्रिंग बनती है।

शैडो जनरेटर के बारे में

बटन-कार्ड को गहराई देने वाला डिजाइन टूल। लेयर, इनसेट व Tailwind एक्सपोर्ट के साथ। बिना CSS रटे प्रोफेशनल शैडो। मुफ्त।

Related Tools

Methodology & feedback

Figures run locally in your browser from the values you enter (page updated 2026-10-02). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.

Was this tool helpful?