मुख्य बिंदु
- 01हर box-shadow parameter का अपना स्लाइडर और साथ ही पिक्सल-सटीक tuning के लिए एक संख्यात्मक input है।
- 02Inset toggle drop shadow और inner shadow के बीच switch करता है pressed या neumorphic effects के लिए।
- 03Color और opacity को अलग से control किया जाता है, readable CSS के लिए rgba() output करते हुए।
- 04पूर्वावलोकन एक real element पर real CSS property का उपयोग करता है — जो आप देखते हैं वह बिल्कुल वही है जो आपकी stylesheet render करेगी।
एक Visual Box-Shadow जनरेटर क्यों का उपयोग करें
CSS box-shadow छह मान तक लेता है — horizontal offset, vertical offset, blur radius, spread radius, color, और एक optional inset keyword। memory से typing करना सरल shadows के लिए काम करता है, लेकिन कुछ भी अधिक nuanced — एक tight glow, एक deep drop shadow, एक soft elevation layer — के लिए आप अनुमान लगा रहे हैं और कुछ सही दिखने तक reload कर रहे हैं।
एक visual जनरेटर उस iteration लूप को ढहाता है। एक स्लाइडर move करें, तुरंत change देखें, और केवल जब आप संतुष्ट हों तब copy करें। Handytool का box-shadow जनरेटर पूरी तरह आपके ब्राउज़र में चलता है, इसलिए पूर्वावलोकन real CSS property है एक real element पर लागू — tool और आपके actual page के बीच कोई rendering अंतर नहीं है।
एक Box Shadow कैसे डिज़ाइन करें
- 01
Horizontal और vertical offsets को समायोजित करें
Positive मान shadow को दाईं ओर और नीचे move करते हैं। Negative मान इसे बाईं ओर और ऊपर move करते हैं। एक centered shadow (0, 0) एक glow effect बनाता है।
- 02
Blur radius सेट करें
Higher blur values softer, अधिक diffuse shadows बनाते हैं। Zero blur एक hard, solid shadow outline बनाता है।
- 03
Spread radius को समायोजित करें
Positive spread blur से पहले shadow को enlarge करता है। Negative spread इसे shrink करता है, जो tight under-element shadows के लिए उपयोगी है।
- 04
एक color और opacity pick करें
Shadow hue चुनने के लिए color picker का उपयोग करें, फिर subtlety के लिए opacity dial down करें। आउटपुट rgba() का उपयोग करता है values को readable रखने के लिए।
- 05
यदि आवश्यक हो तो inset को toggle करें
Inset एक drop shadow से एक inner shadow में switch करता है — pressed buttons, sunken inputs, और neumorphic surfaces के लिए उपयोगी।
- 06
CSS declaration को कॉपी करें
पूरे box-shadow मान पकड़ने के लिए कॉपी पर क्लिक करें और इसे अपनी stylesheet में पेस्ट करें।
कोई अपलोड, कोई खाता
जनरेटर पूरी तरह client-side है। आपकी color choices, numeric values, और preview states आपके ब्राउज़र में रहते हैं — कुछ नहीं सर्वर को भेजा जाता है। खाता बनाने के लिए कुछ नहीं है और कोई usage limit नहीं है।
क्योंकि preview element actual CSS box-shadow property का उपयोग करता है, आउटपुट परिभाषा के अनुसार सटीक है — कोई canvas rendering या screenshot approximation नहीं। pixel मान जो आप copy करते हैं उसी pixel मान हैं जो ब्राउज़र लागू करता है।
Box-Shadow जनरेटर FAQ
Spread मान क्या करता है?
Positive spread blur से पहले सभी दिशाओं में shadow को enlarge करता है; negative spread इसे shrink करता है। Low blur के साथ paired होने पर tight, defined glows के लिए उपयोगी।
क्या मैं multiple box shadows जोड़ सकता हूँ?
यह जनरेटर एक बार में एक shadow output करता है। उन्हें layer करने के लिए, मान copy करें और अपने CSS में comma से अलग करें — box-shadow एक comma-separated list स्वीकार करता है।
मेरा inset shadow क्यों अदृश्य है?
Inset shadows element के अंदर draw करते हैं, इसलिए उन्हें दिखाने के लिए एक background color या visible padding की आवश्यकता होती है। वे transparent या zero-sized elements पर दिखाई नहीं देते हैं।
क्या पूर्वावलोकन पिक्सल-सटीक है?
हाँ — पूर्वावलोकन एक real DOM element पर actual CSS box-shadow property का उपयोग करता है, इसलिए जो आप देखते हैं वह बिल्कुल वही है जो आपकी stylesheet का उत्पादन करेगा।
एक neumorphic shadow क्या है?
Neumorphism दो shadows का उपयोग करता है — एक light और एक dark — opposite दिशाओं में offset करके एक element को raised या pressed दिखाने के लिए एक flat सतह से। दोनों shadows typically pressed variant के लिए inset हैं।