UUID जनरेटर
रैंडम UUID एक साथ ढेर सारे बनाएँ।
CSS box shadow जनरेटर
स्लाइडर से शैडो बनाएँ, कई लेयर जोड़ें और CSS कॉपी करें।
आपकी फ़ाइलें आपके डिवाइस पर ही रहती हैं
यह कैसे काम करता है
- 1ऑफ़सेट, ब्लर और स्प्रेड के स्लाइडर हिलाएँ।
- 2रंग और ओपेसिटी चुनें। अंदरूनी शैडो के लिए Inset पर टिक करें।
- 3ज़्यादा नरम और प्राकृतिक शैडो के लिए लेयर जोड़ें।
- 4CSS कॉपी करें।
विकल्पों का मतलब
- ऑफ़सेट
- बॉक्स से शैडो की आड़ी और खड़ी दूरी। ऋणात्मक वैल्यू बाएँ और ऊपर जाती हैं।
- ब्लर
- किनारा कितना नरम है। शून्य पर किनारा कड़ा रहता है।
- स्प्रेड
- ब्लर से पहले शैडो को बढ़ाता या घटाता है। ऋणात्मक स्प्रेड बड़े ब्लर को किनारों से बाहर फैलने से रोकता है।
- Inset
- शैडो को बॉक्स के अंदर बनाता है, जैसे दबा हुआ फ़ील्ड।
- लेयर
- कई शैडो साथ में बनाई जाती हैं। एक भारी शैडो से दो-तीन हल्की लेयर ज़्यादा प्राकृतिक लगती हैं।
प्राइवेसी
सब कुछ आपके ब्राउज़र में चलता है। आप जो लिखते हैं वह किसी सर्वर को नहीं भेजा जाता।
लोग अक्सर पूछते हैं
एक से ज़्यादा शैडो लेयर क्यों इस्तेमाल करें?
असली शैडो चीज़ के पास तीखी और दूर नरम होती हैं। एक छोटी कसी हुई शैडो और एक बड़ी नरम शैडो मिलकर यही नक़ल करती हैं, जो अकेले ब्लर से ज़्यादा निखरी लगती है।
क्या box shadow गोल कोनों के साथ चलती है?
हाँ, यह एलिमेंट के border-radius को फ़ॉलो करती है। रेडियस स्लाइडर यह दिखाता है और कॉपी किए CSS में शामिल रहता है।
क्या बड़े ब्लर से पेज धीमा होगा?
कुछ स्थिर शैडो ठीक हैं। कई बड़ी ब्लर वाली शैडो, या उन्हें एनिमेट करना, कमज़ोर फ़ोन पर भारी पड़ सकता है। इसके बजाय pseudo-element की opacity को एनिमेट करें।
drop-shadow() से क्या फ़र्क़ है?
box-shadow आयताकार बॉक्स को फ़ॉलो करती है। फ़िल्टर drop-shadow() दिखने वाले आकार को फ़ॉलो करता है, पारदर्शी PNG और SVG के किनारों समेत।
क्या आउटपुट को Tailwind या दूसरे टूल में इस्तेमाल कर सकते हैं?
box-shadow: के बाद की वैल्यू सादा CSS है। Tailwind में उसे arbitrary value में रखें, स्पेस की जगह अंडरस्कोर लगाकर।