CSS shadows को विज़ुअली डिज़ाइन करें
शैडो (Shadows) इंटरफेस को गहराई देते हैं: ये कार्ड्स को पेज से उभारते हैं, दिखाते हैं कि कौन सा बटन दबाया गया है, और डायलॉग को पीछे के कंटेंट से अलग करते हैं। CSS box-shadow प्रॉपर्टी बहुत पावरफुल है, लेकिन इसके पाँच नंबरों को बिना देखे सेट करना मुश्किल होता है। यह जनरेटर आपको स्लाइडर्स और लाइव प्रीव्यू देता है, नेचुरल लुक के लिए कई शैडो को एक साथ जोड़ने (stack) की सुविधा देता है, और क्लीन CSS जनरेट करता है जिसे आप सीधे अपने प्रोजेक्ट में पेस्ट कर सकते हैं।
फीचर्स
- इंस्टेंट प्रीव्यू के साथ Offset, blur, spread, color और opacity कंट्रोल्स।
- एक ही
box-shadowडिक्लेरेशन में पाँच लेयर्स तक का कॉम्बिनेशन। - दबे हुए (pressed) और अंदर की तरफ वाले इफेक्ट्स के लिए Inset shadows।
- आपके डिज़ाइन से मैच करने के लिए Corner radius और प्रीव्यू कलर्स।
- सॉफ्ट, मीडियम, हार्ड, लेयर्ड, इनसेट और ग्लो शैडो के लिए Presets।
rgba()फॉर्मेट में कलर्स के साथ कॉपी-रेडी CSS।
उदाहरण
एक लेयर्ड शैडो जो लाइट बैकग्राउंड पर नेचुरल दिखती है:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
शैडो डिज़ाइन टिप्स
| लक्ष्य | सुझाई गई सेटिंग्स |
|---|---|
| सफेद बैकग्राउंड पर हल्का कार्ड | y 4, blur 12, opacity 8% |
| फ्लोटिंग ड्रॉपडाउन या डायलॉग | 2–3 लेयर्स, y 24 तक, blur 48 तक, opacity हर एक के लिए 7–12% |
| रेट्रो "फ्लैट" लुक | x 6, y 6, blur 0, opacity 100% |
| फोकस या ग्लो इफेक्ट | x 0, y 0, blur 16–24, spread 2–4, ब्रांड कलर |
| प्रेस्ड इनपुट फील्ड | inset, y 2, blur 6, opacity 25–30% |
लाइट सोर्स को एक समान (consistent) रखें: यदि किसी एक कंपोनेंट पर शैडो नीचे की ओर गिरती है, तो वह हर जगह नीचे की ओर ही गिरनी चाहिए।
संबंधित टूल्स
CSS Gradient Generator से अपने कार्ड्स के पीछे का बैकग्राउंड बनाएं, Color Converter से HEX, RGB और HSL के बीच कलर्स कन्वर्ट करें, या Image Color Picker से किसी स्क्रीनशॉट से कलर चुनें।