श्रेणी: डेवलपर टूल
CSS बॉक्स शैडो जेनरेटर
box-shadow बनाएँ और CSS कॉपी करें
खिसकाव, धुंधलापन, फैलाव, रंग और अपारदर्शिता तय करें, सीधे पूर्वावलोकन देखें और चिपकाने के लिए तैयार box-shadow घोषणा कॉपी करें। सब कुछ आपका अपना ब्राउज़र बनाता है।
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
box-shadow एक तय क्रम में पाँच मान लेता है, और इनमें से किसी में हल्का बदलाव भी स्क्रीन पर बहुत अलग दिखता है, इसलिए इसे बिना देखे लिखना असुविधाजनक है। जैसे-जैसे आप स्लाइडर हिलाते हैं, यह टूल असली घोषणा को एक पूर्वावलोकन बॉक्स पर बनाता जाता है। एक दूसरी, कसी हुई संपर्क परत भी जोड़ी जा सकती है — यही जोड़ी डिज़ाइनर इस्तेमाल करते हैं ताकि तत्व धुंधला नहीं, उठा हुआ लगे — और भीतरी विकल्प छाया को अंदर की ओर मोड़ देता है, दबी हुई सतहों के लिए।
इस्तेमाल कैसे करें
- क्षैतिज और ऊर्ध्वाधर खिसकाव, धुंधलापन और फैलाव तय करें।
- रंग और अपारदर्शिता चुनें, और चाहें तो भीतरी छाया या संपर्क परत चालू करें।
- box-shadow घोषणा को अपनी स्टाइलशीट में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या कुछ अपलोड होता है?
- नहीं। पूर्वावलोकन आपके ब्राउज़र की बनाई CSS छाया है और घोषणा पृष्ठ के भीतर ही जुड़ती है।
- फैलाव क्या करता है?
- फैलाव छाया को धुंधला किए जाने से पहले बड़ा या छोटा करता है। ऋणात्मक फैलाव उसे अंदर खींच लेता है, और इसी तरह मुलायम छाया को तत्व के किनारों से बाहर निकलने से रोका जाता है।
- दो परतें क्यों?
- अकेली चौड़ी और मुलायम छाया अक्सर कोहरे जैसी लगती है। तत्व के पास एक छोटी, गहरी परत जोड़ने से संपर्क का किनारा बनता है, और दोनों मिलकर ऊँचाई का एहसास देती हैं।