CSS बॉक्स शैडो जनरेटर: लाइव प्रीव्यू, कोड कॉपी करें

CSS बॉक्स शैडो जनरेटर

यह जनरेटर छह नियंत्रणों से एक CSS box-shadow मान बनाता है: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस, अपने खुद के ओपैसिटी स्लाइडर वाला शैडो रंग, और एक inset टॉगल। दो अतिरिक्त कलर पिकर प्रीव्यू बॉक्स और उसके बैकग्राउंड को सेट करते हैं, ताकि शैडो हल्के और गहरे दोनों बैकग्राउंड पर सही दिखे, और चार प्रीसेट, soft, hard, glow और inset, एक क्लिक में तैयार कॉम्बिनेशन लोड कर देते हैं। हर बदलाव के साथ प्रीव्यू के नीचे box-shadow लाइन तुरंत अपडेट हो जाती है, कॉपी करने के लिए तैयार।

box-shadow मान कैसे बनता है

CSS एक शैडो को तय क्रम में लिखता है: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस, फिर एक रंग; शैडो को बॉक्स के पीछे की बजाय बॉर्डर के अंदर बनाने के लिए आगे inset शब्द जोड़ा जाता है। क्षैतिज और ऊर्ध्वाधर ऑफ़सेट शैडो को साइड में या ऊपर-नीचे खिसकाते हैं, और दोनों -50px तक नेगेटिव वैल्यू स्वीकार करते हैं, इसलिए शैडो बॉक्स के बाईं ओर गिर सकता है या उसके ऊपर बैठ सकता है। ब्लर रेडियस, 0 से 100px के बीच, शैडो के किनारे को नरम करता है, और स्प्रेड रेडियस, -50 से 50px के बीच, बॉक्स के अपने आकार से अलग शैडो को बड़ा या छोटा करता है। कलर पिकर की हेक्स वैल्यू लाल, हरे और नीले हिस्सों में टूटती है, और 0 से 1 के बीच का ओपैसिटी स्लाइडर rgba() के अंदर चौथी वैल्यू बन जाता है; 0 पर शैडो पूरी तरह पारदर्शी होता है, 1 पर यह चुने गए रंग जैसा बिल्कुल एक जैसा हो जाता है।

हल किया गया उदाहरण

क्षैतिज ऑफ़सेट 0px, ऊर्ध्वाधर ऑफ़सेट 6px, ब्लर 16px और स्प्रेड -2px सेट करने पर, शैडो रंग #c2410c और ओपैसिटी 0.4 के साथ, नतीजा मिलता है box-shadow: 0px 6px 16px -2px rgba(194, 65, 12, 0.4)। हेक्स कोड #c2410c लाल 194, हरा 65 और नीला 12 में टूटता है, और ओपैसिटी स्लाइडर का 0.4 बिना किसी अतिरिक्त कन्वर्जन के सीधे rgba() की चौथी वैल्यू बन जाता है। इन्हीं छह वैल्यू पर inset चालू करने से वही शैडो बॉक्स के पीछे की बजाय बॉर्डर के अंदर बनता है, जो दबे हुए बटन या धंसे हुए इनपुट फील्ड के लिए आम इस्तेमाल होता है।

कॉपी के लिए तैयार CSS आउटपुट

.card {
  box-shadow: 0px 6px 16px -2px rgba(194, 65, 12, 0.4);
}