प्रीसेट

कैसे उपयोग करें

1. क्षैतिज और लंबवत ऑफ़सेट, ब्लर, स्प्रेड और अपारदर्शिता समायोजित करने के लिए स्लाइडर खींचें।
2. छाया का रंग चुनें और आवश्यकता अनुसार "inset" सक्षम करें।
3. कई छायाएँ स्टैक करने के लिए "छाया परत जोड़ें" पर क्लिक करें।
4. त्वरित शुरुआत के लिए प्रीसेट का उपयोग करें।
5. परिणाम को अपनी स्टाइलशीट में पेस्ट करने के लिए "CSS कॉपी करें" पर क्लिक करें।

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

CSS में box-shadow क्या है?

CSS box-shadow प्रॉपर्टी किसी तत्व के चारों ओर छाया प्रभाव जोड़ती है। यह क्षैतिज ऑफ़सेट, लंबवत ऑफ़सेट, ब्लर त्रिज्या, स्प्रेड त्रिज्या और रंग के लिए मान लेती है।

क्या मैं कई छायाएँ जोड़ सकता हूँ?

हाँ। दूसरी छाया जोड़ने के लिए «छाया परत जोड़ें» पर क्लिक करें। CSS आउटपुट में कई छायाएँ अल्पविराम से अलग होती हैं। यह जटिल परतदार प्रभाव बनाने की अनुमति देता है।

inset कीवर्ड किस लिए है?

«inset» जोड़ने से छाया तत्व के अंदर दिखाई देती है, बाहर की बजाय, एक आंतरिक छाया या «दबे हुए» प्रभाव का निर्माण करती है।

box-shadow के पांच Parameters

CSS box-shadow एक element के border box पर एक या अधिक drop-shadow effects attach करता है। Grammar है box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, multiple shadows comma-separated के साथ। हर parameter एक specific चीज़ करता है:

• offset-x: वह distance जितनी shadow horizontally shift होती है। Positive right move करता है; negative left। 0 horizontally centre करता है।
• offset-y: vertical shift। Positive down move करता है (overhead lighting की mimicry, most common UI convention)। Negative up move करता है।
• blur-radius: shadow का edge transparent तक कितनी दूर fade करता है। Gaussian convolution के रूप में implement किया गया; larger values softer, larger, more diffuse shadows produce करते हैं। Negative values invalid हैं; 0 hard, sharp edge produce करता है।
• spread-radius: blur apply होने से before shadow shape grow (positive) या shrink (negative) करता है। Positive spread shadow को हर direction में expand करती है; negative contract करती है, जिससे आप shadow को box के एक side तक confine कर सकते हैं।
• color: currentcolor पर default करता है (element की अपनी color value, जो occasionally surprising होती है)। UI shadows almost always black या near-black with low alpha use करती हैं, rgba(0,0,0,0.05) से rgba(0,0,0,0.25) तक: क्योंकि solid-black shadows heavy और unnatural लगते हैं।
• inset keyword shadow को outside की बजाय box के inside paint करता है। Pressed-button states, recessed input wells, और inner glows के लिए use होता है।

Browser shadows की list front-to-back composite करता है: first-listed shadow viewer के closest है, last सबसे furthest back है। यह text-shadow और background जैसी ordering है, लेकिन यह most CSS rules के cascade के opposite है, नए authors के लिए common surprise।

Material Design का Two-Shadow Elevation System

Google का Material Design (May 2014 में introduced; 2021 में Material Design 3) एक quantised elevation system define करता है जिसमें UI surfaces कई density-independent pixel levels में से एक पर sit करती हैं। हर level पर shadow recipe दो stacked shadows use करती है:

• Umbra (key shadow), smaller, darker, surface के नीचे directly-blocked light represent करती है। Short offset और blur।
• Penumbra (ambient shadow), larger और more diffuse, room में scatter होने वाली light represent करती है। Larger offset, larger blur, lighter alpha।

Material Design 2 में, elevation values 0dp (no shadow) से 24dp तक चलती हैं; cards typically rest पर 1-2dp use करते हैं और hover पर 8dp तक animate करते हैं, जबकि modal dialogs 24dp use करते हैं। Material Design 3 ने scale को पांच named Levels (1 through 5) तक condense किया और dark themes पर drop shadows के अलावा tinted overlays add किए। Umbra-plus-penumbra structure visual model बना रहता है, और इसीलिए Tailwind का shadow-md दो stacked shadows के रूप में ship होता है: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)।

Neumorphism: वह Trend जिसे दो Opposing Shadows चाहिए थे

Neumorphism («new» और «skeuomorphism» का portmanteau) late 2019 / early 2020 में viral popularity में rise हुआ December 2019 Dribbble post के बाद जो Ukrainian designer Alexander Plyuto का था और जो हफ्तों में tens of thousands of likes collect कर गया। Defining recipe है एक element पर दो box-shadows जिसका background colour उसके parent जैसा हो: bottom-right पर darker shadow और top-left पर lighter shadow। Dark side surface को light source से away recede simulate करती है; light side इसे highlight में lift simulate करती है। Offsets invert करने से (या दोनों पर inset add करने से) recessed/pressed appearance create होती है।

Honest accessibility caveat: neumorphism की widely criticised किया गया है क्योंकि element और उसके background के बीच visual contrast necessarily बहुत low है, वे एक colour share करते हैं। Buttons और inputs WCAG 1.4.11 (Non-text Contrast, AA, UI components का adjacent colours के against 3:1 ratio) fail कर सकते हैं। Pressed और unpressed states अक्सर केवल subtle shadow direction से distinguishable होती हैं, जो screen readers convey नहीं कर सकते और जो low vision, colour blindness, या screen glare वाले किसी के लिए invisible होती हैं। Style को decorative surfaces पर sparingly use करें, primary controls पर नहीं।

box-shadow बनाम filter: drop-shadow()

CSS Filter Effects एक alternative define करता है, filter: drop-shadow(<x> <y> <blur> <color>): जो visually similar दिखती है लेकिन एक critical difference के साथ। box-shadow border box rectangle का shadow cast करता है (यदि कोई हो तो border-radius से rounded)। drop-shadow rendered element के alpha channel का shadow cast करता है, children, transparent PNGs, cutouts वाले SVG shapes, masked content सहित। drop-shadow choose करने का most common reason यह है कि आप जिस element को shadow देना चाहते हैं वह rectangle नहीं है, transparent PNG icon, SVG logo, speech-bubble triangle।

	box-shadow	drop-shadow()
Spread पैरामीटर	हां	नहीं
Inset संस्करण	हां	नहीं
अनेक shadows	हां (comma list)	हां (chain filters)
Descendants को affect करती है	नहीं	हां (whole subtree)
Clipping	overflow:hidden से बाहर extend हो सकती है	Filter bounds तक confined
Performance	Compositor के लिए अनुकूल	Filter pass trigger करता है

Performance Notes

Box-shadow CSS की सबसे expensive properties में से एक है real time में render करने के लिए। Cost के तीन drivers हैं: blur kernel size (Gaussian blur एक separable two-pass convolution है; blur को double करने से per-pixel work quadruple होता है, इसलिए large card पर 100-pixel blur scroll के दौरान frame rate noticeably drop कर सकती है), shadow surface area (rectangle जो spread से expand और blur से further grow होता है वही GPU को rasterise करना होता है, large modal-overlay shadows सबसे expensive kind हैं), और repaints (animating box-shadow shadow region का repaint हर frame पर trigger करता है)।

व्यावहारिक सुझाव:

• Hover-elevation animations के लिए, transform: translateY() और opacity animate करना prefer करें rather than box-shadow। ये GPU-accelerated हैं और paint trigger नहीं करते।
• Hover पर shadow-swap के लिए, दोनों shadows को larger one opacity: 0 के साथ pseudo-element पर declare करें, फिर pseudo-element की opacity animate करें। यह blur kernel को animate किए बिना shadows swap करता है, Tobias Ahlin का «Shadow Tricks» (2017) canonical write-up है।
• will-change: transform browser को hint कर सकता है कि element को उसकी own compositor layer पर promote करे। Sparingly use करें, many elements promote करने से GPU memory waste होती है।
• उन elements पर box-shadow avoid करें जिनमें large amounts of scrolling content हो। हर scroll frame को shadow repaint करना होता है।

Accessibility

Shadows accessibility tree की दृष्टि से decorative हैं (screen readers उन्हें ignore करते हैं) लेकिन उनके implications हैं:

• WCAG 1.4.11 Non-text Contrast (AA, 3:1)। यदि card या button केवल shadow से background से distinguish होता है, तो shadow effectively visual edge define करती है, और near-white background पर rgba(0,0,0,0.05) shadow 3:1 threshold meet नहीं कर सकती। कई design systems shadow plus 1px solid border दोनों double up करते हैं contrast guarantee करने के लिए।
• Focus indicators। box-shadow: 0 0 0 3px <color> browser default outline का modern alternative है क्योंकि यह border-radius follow करता है। Ring WCAG 2.4.7 Focus Visible meet करनी चाहिए, minimum 2 CSS pixels thick, unfocused state और adjacent colours के against 3:1 contrast के साथ।
• Forced-colors / Windows High Contrast। forced-colors: active mode में, browsers most CSS colours ignore करते हैं और content को user के system palette से re-colour करते हैं। Box-shadows stripped या reduced होते हैं; UI states का हमेशा non-shadow indicator होना चाहिए (border change, colour change, icon, text label) इन users के लिए।
• Reduced motion। prefers-reduced-motion: reduce वाले users को hover या scroll पर large shadow animations नहीं देखनी चाहिए। Animated transitions को media query में wrap करें और इन users के लिए resting shadow hold करें।

Quick Recipes

Effect	CSS
सूक्ष्म card lift	0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
मृदु modern card	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
भारी modal lift	0 25px 50px -12px rgba(0,0,0,0.25)
तीखा 1px stamp	0 0 0 1px rgba(0,0,0,0.05)
फ़ोकस ring (3px)	0 0 0 3px rgba(59,130,246,0.5)
Inset input «well»	inset 0 2px 4px 0 rgba(0,0,0,0.06)
चमकदार halo	0 0 20px 4px rgba(99,102,241,0.6)

अधिक Questions

मेरी shadow clip क्यों हो रही है?

लगभग हमेशा इसलिए कि किसी ancestor element में overflow: hidden है। Shadow border box से beyond extend करती है लेकिन ancestor के edge पर clip होती है। दो fixes: shadow को ancestor पर ही lift करें, या overflow clipping के बिना wrapping element use करें। filter: drop-shadow() में यह issue नहीं है लेकिन इसके अपने trade-offs हैं।

क्या मुझे अभी भी -webkit-box-shadow जैसे vendor prefixes use करने चाहिए?

नहीं। Unprefixed box-shadow around 2012 से universally supported है। Vendor prefixes 2026 code में pure noise हैं और strip होनी चाहिए। Early 2010s की CSS reset libraries अक्सर उन्हें defensively ship करती थीं; modern code उन्हें safely drop कर सकता है।

Text पर shadow कैसे apply करूं, box पर नहीं?

text-shadow use करें, जिसमें same offset / blur / colour syntax है लेकिन कोई spread या inset नहीं। Stylised text पर glyph-shaped shadows के लिए (जैसे background-clip: text gradient text), parent पर filter: drop-shadow() सही tool है, box-shadow glyphs के behind rectangular shadow cast करेगा।

मेरी 0 0 0 2px shadow soft क्यों नहीं दिखती?

क्योंकि third value (blur radius) 0 है। Blur के बिना spread-only shadow sharp solid outline produce करती है, जो focus rings और «fake outline» tricks के लिए exactly वही है जो आप चाहते हैं लेकिन soft elevation के लिए नहीं। Some blur add करें: 0 0 4px 0 rgba(0,0,0,0.2)।

क्या कुछ server को भेजा जाता है?

नहीं। Preview आपके browser में sliders drag करने पर re-renders होता है; CSS string locally generate होती है; copying आपके clipboard पर writes होता है। Page एक बार load होने के बाद offline काम करता है।

संबंधित टूल