CSS Box Shadow जनरेटर

CSS Box Shadow जनरेटर क्या है?

यह visual tool box-shadow CSS property बनाता है। X/Y offset, blur, spread, color, और inset — सब live preview के साथ adjust करें। Material Design layered shadows सपोर्ट।

टूल का उपयोग कैसे करें

Horizontal और Vertical offset slide करें।
Blur radius adjust करें (soft vs sharp)।
Spread radius (shadow size) चुनें।
Color और opacity चुनें।
Inset (inner shadow) toggle करें।
CSS copy करें।

Common shadow patterns

Subtle card: 0 1px 3px rgba(0,0,0,0.1)
Material Design: layered multiple shadows
Pressed button: inset 0 2px 4px rgba(0,0,0,0.2)
Glow effect: 0 0 20px rgba(color, 0.5)

अक्सर पूछे जाने वाले प्रश्न

Box shadow CSS कैसे काम करता है?

Syntax: box-shadow: x-offset y-offset blur spread color। उदाहरण: box-shadow: 0 4px 6px rgba(0,0,0,0.1) — element के नीचे subtle shadow। Multiple shadows comma-separated। Inset keyword inner shadow के लिए।

Realistic shadow कैसे बनाएं?

Multiple layered shadows: एक बहुत soft (large blur, low opacity), एक थोड़ा sharper, एक hard edge। Material Design ने यह popularize किया। उदाहरण: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)।

Inset shadow क्या है?

Inset (अंदर की) shadow element के अंदर पड़ती है — pressed/sunken effect देती है। syntax: box-shadow: inset 0 0 10px rgba(0,0,0,0.3)। Buttons के active state, input fields में depressed look के लिए।

Drop shadow vs box shadow?

box-shadow rectangle/element shape follow करती है। filter: drop-shadow() actual shape (transparent PNGs, irregular shapes) follow करती है। Transparent SVGs के लिए drop-shadow ज़रूरी। Performance में box-shadow थोड़ा तेज़ है।