CSS बॉक्स शैडो जनरेटर
आपके डिवाइस पर चलता है। कुछ भी नहीं भेजा जाता।सब कुछ आपके ब्राउज़र में चलता है - कहीं कुछ नहीं भेजा जाता।
यहाँ से शुरू करें
लेयर
क्षैतिज खिसकाव
ऊर्ध्वाधर खिसकाव
ब्लर
फैलाव
रंग
कोड
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]मौजूदा शैडो एडिट करें
लेयर, इनसेट और स्मूद प्रीसेट से CSS शैडो बनाएँ, लाइव देखें और CSS या Tailwind क्लास कॉपी करें। मौजूदा शैडो चिपकाकर उसे एडिट करें।
नंबरों का अंदाज़ा लगाने के बजाय आँख से देखकर मनचाहा शैडो बनाइए। किसी प्रीसेट से शुरू करें - सॉफ़्ट, मीडियम, हार्ड रेट्रो, स्मूद लेयर्ड, तैरता हुआ, अंदरूनी, न्यूमॉर्फ़िक या चमक - फिर हर लेयर का खिसकाव, ब्लर, फैलाव, रंग, अपारदर्शिता और इनसेट बारीकी से सेट करें; खींचते ही प्रीव्यू बदलता है। एक शैडो में आठ लेयर तक हो सकती हैं, और सबसे प्राकृतिक शैडो ऐसे ही बनते हैं। नतीजे को CSS या Tailwind क्लास के रूप में कॉपी करें, लिंक से शेयर करें, या अपनी स्टाइलशीट का box-shadow चिपकाकर आगे काम करें।
अक्सर पूछे जाने वाले सवाल
ब्लर और फैलाव क्या करते हैं?
ब्लर शैडो के किनारे को नरम करता है: 0 एक तीखी रेखा है, बड़े मान उसे ज़्यादा पिक्सेल में धुंधला करते हैं। फैलाव ब्लर से पहले शैडो को बड़ा (धनात्मक) या छोटा (ऋणात्मक) करता है - छोटा ऋणात्मक फैलाव और बड़ा ब्लर मिलकर आधुनिक इंटरफ़ेस के नरम, अंदर सिमटे शैडो बनाते हैं।
कई लेयर क्यों?
असली शैडो चीज़ के पास गहरे और तीखे होते हैं और दूर जाकर हल्के और नरम। एक लेयर दोनों नहीं कर सकती; 'स्मूद लेयर्ड' प्रीसेट की तरह दुगुने होते खिसकाव और ब्लर वाली कुछ लेयर एक के ऊपर एक रखने से शैडो कहीं ज़्यादा प्राकृतिक दिखता है।
इनसेट शैडो क्या है?
इनसेट शैडो बॉक्स के बाहर नहीं, अंदर बनता है, जिससे बॉक्स दबा हुआ लगता है - इनपुट फ़ील्ड, गड्ढे जैसे हिस्सों और दबे बटन के लिए काम का। एक ही शैडो में अंदरूनी और बाहरी लेयर मिलाई जा सकती हैं।
क्या box-shadow पेज को धीमा करता है?
कुछ शैडो का ख़र्च लगभग नहीं होता। बहुत सारे एलिमेंट पर बहुत बड़ा ब्लर, या box-shadow को ही एनिमेट करना धीमे फ़ोन पर फ़्रेम रेट गिरा सकता है; एनिमेशन के लिए उस pseudo-element की अपारदर्शिता बदलें जिस पर शैडो पहले से है।