CSS Box Shadow Generator

यह किसके लिए है?

CSS box-shadow property depth जोड़ने के लिए workhorse है — cards पर drop shadows, button highlights, focus rings, glows, neon effects, यहाँ तक कि नकली 3D भी। Syntax (x y blur spread color, optional inset, comma-separated multiple shadows) पढ़ने में आसान है पर बिना देखे tweak करना थकाने वाला है। यह tool हर value के लिए sliders और live preview देता है, साथ ही common design-system elevations से match करने वाले presets भी।

कब इस्तेमाल करें

• Card या modal elevation design करना जो "सस्ता और कठोर" न दिखे।
• Accessibility के लिए focus-ring style बनाना (जैसे 2px outline glow)।
• एक hero CTA के लिए neon या glow effect बनाना।
• एक design system के लिए Material Design या Apple-style elevation tokens replicate करना।
• Pressed-button effect या card recess के लिए नकली "inset" depth बनाना।

हर value क्या करती है

• X / Y offset — shadow किस direction में गिरती है (positive Y = नीचे)। "ऊपर से light" वाले feel के लिए, Y > 0 और छोटा या zero X इस्तेमाल करें।
• Blur — edge कितनी soft है। 0 = sharp; ज़्यादा = softer fade।
• Spread — shadow box से कितनी बड़ी (या negative होने पर छोटी) है।
• Color & alpha — आम तौर पर partial-alpha black या brand color। Pure #000 बहुत heavy दिखता है; natural depth के लिए #0003 से #0002 try करें।
• Inset — shadow को अंदर की तरफ flip करता है, recess की तरह।

आम गलतियाँ

• एक बड़ी shadow artificial दिखती है। Real elevation दो या तीन layers stacked होती है: एक tight, dark, close-in shadow plus एक wide, soft, far-out। "Material elevation" preset यह pattern दिखाता है।
• Pure black बहुत heavy है। ~10–25% alpha black इस्तेमाल करें, या warmth के लिए shadow को surface के complement से tint करें।
• Shadows box के बाहर render होती हैं। अगर आपके container में overflow: hidden है, तो shadow clip हो जाएगी। एक wrapper इस्तेमाल करें या overflow को child पर move करें।
• Transparent background पर shadow। अगर box का कोई background नहीं है, तो shadow खुद box के through दिखती है — आम तौर पर surprising।
• Performance: कई elements पर बहुत बड़ा blur low-end mobile पर expensive हो सकता है। Fancy glows ship करने से पहले real device पर test करें।
• Dark mode। Subtle dark-on-dark shadows लगभग गायब हो जाती हैं; dark themes में bright inner border या light-tinted shadow consider करें।