CSS Box Shadow Generator (live preview के साथ)
छह common shadow presets (soft, card, lifted, glow, neumorphic, inset)। Sliders से सभी parameters fine-tune करें, result live देखें, और ready-to-paste CSS copy करें।
कैसे काम करता है
पाँच shadow parameters
X offset: horizontal displacement। Positive shadow right shift करता है, negative left। Upper-left से sun lighting (typical UI assumption) के लिए, small positive X upper-left से light simulate करता है।
Y offset: vertical displacement। Positive shadow down shift करता है, ऊपर से light source simulate करता है। Almost सभी UI shadows positive Y उपयोग करते हैं।
Blur radius: shadow का edge कितना soft है। 0 = sharp edge (rare)। Cards और buttons के लिए 8-30px typical है। Higher values dreamy, soft shadows create करते हैं।
Spread: shadow को uniformly extends या shrinks करता है। Positive values shadow को element से larger बनाते हैं; negative shrinks करता है। Offset के साथ combine होने पर negative spread 'lifted' effect create करता है।
Color/opacity: shadows usually black होते हैं low opacity के साथ (10-30%)। Colored shadows trendy हैं लेकिन well use करना कठिन है।
Inset shadows
Inset shadow element के बाहर के बजाय अंदर drawn होता है। Uses: pressed-button states, sunken input fields, neumorphic '3D pushed-in' effects।
Inset shadows element के border radius respect करते हैं और overflow ignore करते हैं। वे actual layout बदले बिना flat UI elements में visual depth add करने के लिए useful हैं।
Neumorphism और 'soft UI' trend
Neumorphism (popular 2020-2022) दो opposing shadows उपयोग करता है — एक light, एक dark — elements को same-colored background से extruded appear कराने के लिए। हमारा 'Neumorphic' preset single dark shadow दिखाता है; full neumorphism के लिए, opposite side पर light inset shadow के साथ combine करें।
Note: pure neumorphism में accessibility issues हैं — contrast की कमी elements को distinguish करना कठिन बनाती है। Modern designs इसे sparingly उपयोग करते हैं।
अक्सर पूछे जाने वाले प्रश्न
›क्या मैं multiple shadows add कर सकता हूँ?
CSS comma-separated multiple shadows support करता है: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'। हमारा tool एक बार में एक shadow generate करता है; multiple by hand combine करें।
›Neumorphic effect कैसे बनाएँ?
Bottom-right पर dark shadow को top-left पर light shadow के साथ combine करें, दोनों inset या दोनों outset। Example: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'।
›Blur और spread में क्या अंतर है?
Blur shadow का edge soften करता है (gradient transparency)। Spread shadow का overall size change करता है। Blur=20 spread=0 element size पर soft glow है; blur=0 spread=20 20px larger hard shadow है।
›मेरा shadow flat क्यों दिखता है?
Likely too low opacity, no offset, या shadow color background के too close है। Starting point के रूप में Y=8, blur=24, opacity=0.18 try करें।
›क्या मैं इसे text-shadow के लिए उपयोग कर सकता हूँ?
Almost — text-shadow same syntax minus 'spread' और 'inset' उपयोग करता है। Copy करने के बाद manually adjust करें: 'X Y blur color' लें (spread और inset drop करें)।
›क्या shadows performant हैं?
Box-shadow modern browsers में GPU-accelerated है। Cards और buttons पर single shadows: zero concern।
›क्या मुझे shadows या borders उपयोग करने चाहिए?
दोनों के uses हैं। Borders crisper और more accessible हैं। Shadows softer/more elevated दिखते हैं।
›क्या data मेरे browser से बाहर जाता है?
नहीं। सभी preview और CSS generation locally चलती है; कुछ भी server को नहीं भेजा जाता।
संबंधित टूल्स
अंतिम अपडेट: