CSS Box-Shadow जेनरेटर

CSS `box-shadow` property एक HTML element में एक या अधिक shadow effects जोड़ती है। हर shadow छह values तक defined होता है: एक optional `inset` keyword, horizontal offset, vertical offset, blur radius, spread radius और color। Positive horizontal offsets shadow को दाईं ओर push करते हैं; positive vertical offsets इसे नीचे push करते हैं। Multiple shadows comma-separated होते हैं और front-to-back render होते हैं। यह किसी भी images के बिना UI components में visual depth, elevation hierarchy, glow effects और neumorphic styling जोड़ने का primary CSS mechanism है।

Full syntax है: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`। केवल `offset-x`, `offset-y` और `color` required हैं; `blur-radius` और `spread-radius` अगर omit किए जाएं तो 0 default होते हैं, और `inset` outer shadow default होता है। एक typical card shadow ऐसी दिखती है: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`। Unlimited shadows को commas से separate करके stack करें — ये front-to-back render होते हैं (पहले listed सबसे ऊपर)। यह generator full declaration `box-shadow:` property name सहित output करता है, या अगर आप prefer करें तो सिर्फ value।

Blur-radius edge softness control करता है: zero एक hard, crisp edge देता है जो element shape को exactly match करता है; बड़े values progressively softer, अधिक diffuse fade बनाते हैं। Spread-radius blur apply होने से पहले पूरे shadow को grow या shrink करता है: positive values इसे element की boundary से बाहर expand करते हैं, negative values इसे inward contract करते हैं। सबसे realistic-looking shadows moderate blur के साथ slightly negative spread use करते हैं, shadow को बहुत दूर spread होने की बजाय element के footprint के करीब रखते हैं। यही Deep और Floating presets में use की गई technique है।

Shadow declaration की शुरुआत में `inset` keyword add करें: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`। Inset shadow element के पीछे की बजाय border box के अंदर draw होता है, जिससे recessed या pressed-in appearance बनती है। Common uses में शामिल हैं: input fields (focus depth दिखाना), toggle switch tracks, push-button active states और embossed text containers। इस generator में हर layer के control panel में Inset toggle है — इसे enable करें और shadow preview element के अंदर तुरंत flip हो जाता है।

हाँ — CSS किसी single element पर comma-separated shadows की कोई भी संख्या allow करता है। ये listed order में render होते हैं, पहला shadow सबसे ऊपर। Multiple layers stack करना smooth, realistic depth के लिए key technique है — एक single large shadow artificial लगती है, जबकि तीन से पाँच graduated layers physically light scatter को mimic करती हैं। यह generator आठ independent layers तक support करता है, हर एक के अपने offset, blur, spread, color, opacity और inset toggle के साथ। Eye icon आपको quick before/after comparison के लिए layers delete किए बिना show/hide करने देता है।

Neumorphism उस element पर दो opposing shadows use करता है जिसका background colour page से match करता है: एक bright (near-white) shadow top-left की ओर, एक dark (low opacity पर black) bottom-right की ओर। इससे element background surface से extruded दिखती है। Classic neumorphic declaration: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`। Illusion के काम करने के लिए element का background page background से exactly match होना चाहिए। इस generator में Neumorphic preset एक ready-made starting point provide करता है — इसे context में देखने के लिए preview background को 'Soft grey' पर switch करें।

Zero offset, large blur radius और coloured value use करें: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`। Zero offset glow को सभी directions में evenly radiate करता है। Positive spread glow को element से और दूर push करता है। दो layers combine करना — एक smaller blur और higher opacity के साथ bright core के लिए, और एक large blur और lower opacity के साथ ambient halo के लिए — एक convincing luminous effect produce करता है। Glow Blue preset इसे two-layer approach से demonstrate करता है। Custom accent glows के लिए color को किसी भी hue में बदलें।

एक बड़े shadow की बजाय तीन से पाँच layers stack करें जहाँ हर एक roughly offset और blur को double करता है जबकि opacity half करता है: उदाहरण के लिए, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`। यह technique physically light scatter को point source से mimic करती है और किसी भी zoom level या display resolution पर convincing रहती है। इस generator में Deep और Floating presets exactly इसी principle पर built हैं — तीन graduated layers जो किसी भी scale पर natural पढ़ते हैं।

`box-shadow` हमेशा element के rectangular border box को follow करता है, चाहे element visually कैसी भी दिखे। `filter: drop-shadow()` element के actual alpha channel silhouette को trace करता है — transparent PNG cutouts या SVG icons के लिए उपयोगी जहाँ आप shadow को bounding rectangle की बजाय shape follow करवाना चाहते हैं। Standard UI components (cards, buttons, panels, dialogs) के लिए `box-shadow` सही है: यह paint करने में तेज है, inset mode support करता है, spread radius accept करता है, और multiple stacked layers allow करता है। `filter: drop-shadow()` तभी use करें जब shadow shape के लिए element का transparent background matter करता हो।

नहीं। `box-shadow` purely एक visual effect है जो normal layout flow से बाहर render होती है। यह कभी sibling elements को push नहीं करती, कभी scrollable content area नहीं बढ़ाती, और element के computed width, height, margin या padding पर कोई effect नहीं होता। Shadows element के box से visually बाहर extend होते हैं लेकिन layout engine द्वारा ignore किए जाते हैं। इसका मतलब है कि आप tightly-packed grid में layout तोड़े बिना generous shadows add कर सकते हैं — हालाँकि shadow clip न हो यह सुनिश्चित करने के लिए parent container पर `overflow: visible` add करना चाह सकते हैं।

एक बार shadow build कर लेने के बाद, generator तीन output formats offer करता है। <strong>Copy CSS</strong> full property declaration (`box-shadow: …;`) देता है जो किसी भी stylesheet के लिए ready है। <strong>Copy value</strong> सिर्फ shadow value देता है — SCSS variable, CSS custom property value, या Tailwind `extend.boxShadow` entry के रूप में useful। <strong>React style</strong> JSX inline style objects या Styled Components के लिए camelCase format (`boxShadow: '…'`) output करता है। Tailwind के लिए, custom shadow utility class बनाने के लिए value को अपने `tailwind.config.js` में `theme.extend.boxShadow` के under paste करें।

अधिकांश dedicated box-shadow tools केवल single-layer generation offer करते हैं — cssgenerator.org, उदाहरण के लिए, basic controls provide करता है लेकिन कोई preset library और multi-layer stacking नहीं। css-tricks.com का reference documentation है, interactive tool नहीं। cssmatic.com पर CSS Generators functional हैं लेकिन पुराने और ad-heavy हैं। UtiloKit का generator per-layer eye toggles के साथ आठ independent layers तक support करता है, सबसे common shadow design patterns (card, crisp, material, neumorphic, floating, deep, glow, inset well) cover करने वाले आठ curated presets, अलग-अलग frameworks के लिए तीन output formats, और contrast checking के लिए full dark/light background toggle — सब ad-free और zero data upload के साथ।

हाँ — box-shadow generator पूरी तरह responsive है। iPhone और Android पर, सभी sliders appropriately sized drag handles के साथ touch-friendly हैं। Live preview element mobile screens पर fit होने के लिए scale होता है। Color pickers mobile browsers पर native system color picker use करते हैं। Three-column desktop layout narrow screens पर clean single-column vertical layout में collapse होता है। सभी copy buttons Web Clipboard API use करते हैं, जो iOS और Android दोनों पर Safari, Chrome और Firefox पर supported है। कोई app download required नहीं, कोई account नहीं चाहिए — URL खोलें और building शुरू करें।