डेवलपर / CSS
CSS बॉक्स शैडो जनरेटर
CSS box-shadow को विज़ुअली बनाएं: ऑफ़सेट, ब्लर, स्प्रेड, रंग, अपारदर्शिता, inset और कई लेयर सेट करें, प्रीसेट व लाइव प्रीव्यू देखें और CSS कॉपी करें।
CSS बॉक्स शैडो जनरेटर: हर लेयर box-shadow सूची में एक शैडो बनती है: क्षैतिज और ऊर्ध्वाधर ऑफ़सेट, ब्लर रेडियस, स्प्रेड और rgb() के रूप में लिखा गया रंग, जिसके बाद स्लैश के बाद अपारदर्शिता होती है। लेयर पहली वाली को सबसे ऊपर रखकर बनाई जाती हैं। प्रीव्यू बॉक्स का कोने का रेडियस, रंग और बैकग्राउंड आपके डिज़ाइन से मेल खाने के लिए बदले जा सकते हैं, और शैडो कोनों का उसी तरह अनुसरण करता है जैसे आपके पेज पर करेगा। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।
- श्रेणी
- डेवलपर टूल्स
- रन
- आपके ब्राउज़र में
- लागत
- मुफ़्त · साइन अप की ज़रूरत नहीं
- उपलब्धता
- इस्तेमाल के लिए तैयार
पूरी तरह आपके ब्राउज़र में चलता है
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
मान क्रमशः दायाँ ऑफ़सेट, नीचे का ऑफ़सेट, धुंधलापन, फैलाव और रंग हैं। एक भारी शैडो की तुलना में कई पतली लेयर अधिक स्वाभाविक दिखती हैं; बाद की लेयरें पहले वाली लेयरों के नीचे बनाई जाती हैं।
प्रीसेट्स
ऊँचाई का एहसास
डिज़ाइन सिस्टम शैडो का इस्तेमाल यह दिखाने के लिए करते हैं कि कोई चीज़ पेज से कितनी ऊँचाई पर तैरती हुई लगती है: स्थिर कार्ड की शैडो छोटी और सघन होती है, जबकि मेन्यू या डायलॉग की शैडो बड़ी और नरम होती है। हर जगह अलग शैडो रखने के बजाय कुछ तय स्तर रखने से इंटरफ़ेस एकसार महसूस होता है।
गहरे बैकग्राउंड पर शैडो मुश्किल से दिखाई देती हैं; वहाँ हल्के सतह-रंग या पतली बॉर्डर से वही काम लिया जा सकता है। बटन और कार्ड के लिए शैडो को CSS ग्रेडिएंट के साथ इस्तेमाल करें।
शैडो और प्रदर्शन
बड़ी ब्लर को छोटी ब्लर की तुलना में बनाने में अधिक संसाधन लगते हैं। जब कई शैडो वाले एलिमेंट एक साथ स्क्रॉल या ऐनिमेट होते हैं, तो यह महत्वपूर्ण हो जाता है। हॉवर पर शैडो ऐनिमेट करने के लिए हर फ़्रेम में box-shadow बदलने के बजाय opacity वाले pseudo-element पर दूसरी, अधिक गहरी शैडो को धीरे-धीरे दिखाना अधिक स्मूद होता है।
इस्तेमाल करने का तरीका
- प्रीसेट से शुरुआत करें या पहली लेयर के ऑफ़सेट, ब्लर, स्प्रेड और अपारदर्शिता को समायोजित करें।
- ज़्यादा मुलायम और वास्तविक शैडो के लिए और लेयर जोड़ें, या बॉक्स के अंदर शैडो के लिए inset चुनें।
- box-shadow डिक्लेरेशन कॉपी करें।
गोपनीयता और सीमाएँ
सब कुछ आपके ब्राउज़र में चलता है; आपकी पिछली शैडो केवल इसी ब्राउज़र में रखी जाती है।
संबंधित टूल्स
अक्सर पूछे जाने वाले सवाल
box-shadow में दिए गए चार नंबर क्या होते हैं?
क्षैतिज ऑफ़सेट (धनात्मक मान शैडो को दाईं ओर ले जाता है), ऊर्ध्वाधर ऑफ़सेट (धनात्मक मान इसे नीचे ले जाता है), ब्लर रेडियस (बड़ा मान शैडो को अधिक मुलायम बनाता है और यह ऋणात्मक नहीं हो सकता) और स्प्रेड (धनात्मक मान शैडो को बॉक्स से बड़ा, जबकि ऋणात्मक मान छोटा बनाता है)। रंग अंत में आता है।
मैं शैडो को प्राकृतिक कैसे दिखाऊं?
कम अपारदर्शिता रखें, शैडो को नीचे की ओर ऑफ़सेट करें जैसे रोशनी ऊपर से आ रही हो, और 2 या उससे अधिक लेयर मिलाएं: बॉक्स के पास एक छोटी, अधिक स्पष्ट लेयर और उससे दूर एक बड़ी, अधिक मुलायम लेयर। थोड़ा ऋणात्मक स्प्रेड बड़ी ब्लर को किनारों पर दिखने से रोकता है।
inset क्या करता है?
यह शैडो को बाहर की बजाय बॉक्स के अंदर बनाता है, जिससे बॉक्स दबा हुआ दिखता है। यह इनपुट फ़ील्ड और दबाए गए बटनों के लिए उपयोगी है।
इमेज पर मेरी शैडो क्यों नहीं दिखती?
box-shadow पिक्चर के अंदर के आकार के चारों ओर नहीं, बल्कि एलिमेंट के बॉक्स के चारों ओर बनाई जाती है। पारदर्शी PNG की बाहरी रूपरेखा के लिए इसके बजाय CSS filter drop-shadow() का उपयोग करें।
मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं