CSS Box-Shadow जनरेटर
दृश्य पूर्वावलोकन के साथ परिपूर्ण CSS शैडो बनाएँ।
Environment
CSS Output
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Layer 1
अनुशंसित टूल्स
चुने हुए उपयोगी टूल्स
CSS बॉक्स शैडो को दृश्य रूप से डिज़ाइन करना
अवलोकन
बॉक्स शैडो जनरेटर आपको संख्याएँ अनुमान लगाने के बजाय स्लाइडर खींचकर CSS box-shadow प्रॉपर्टी बनाने देता है। छायाएँ बटन, कार्ड और मोडल में गहराई और पदानुक्रम जोड़ती हैं, पर इसका सिंटैक्स (ऑफ़सेट, ब्लर, स्प्रेड, रंग और inset) हाथ से लिखना झंझट भरा है। यह टूल हर मान समायोजित करते ही लाइव पूर्वावलोकन दिखाता है और कॉपी करने योग्य सटीक CSS देता है, सब कुछ आपके ब्राउज़र में।
कैसे उपयोग करें (चरण-दर-चरण)
- 1
स्लाइडर समायोजित करें
लाइव पूर्वावलोकन देखते हुए क्षैतिज व ऊर्ध्वाधर ऑफ़सेट, ब्लर, स्प्रेड और रंग सेट करें।
- 2
ज़रूरत हो तो छायाएँ स्टैक करें
गहराई हेतु कई छाया परतें जोड़ें, या भीतरी छाया के लिए inset चालू करें।
- 3
CSS कॉपी करें
उत्पन्न box-shadow मान लें और अपनी स्टाइलशीट या कंपोनेंट में चिपकाएँ।
यह कैसे काम करता है
box-shadow प्रॉपर्टी क्षैतिज व ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या, वैकल्पिक स्प्रेड और रंग (आमतौर पर पारदर्शिता सहित) लेती है। आप हर एक के लिए स्लाइडर हिलाते हैं और पूर्वावलोकन तुरंत अपडेट होता है, ताकि आप ठीक देख सकें कि छाया कैसे पड़ती है। टूल संगत box-shadow घोषणा लिखता है, जिसमें आपके जोड़े कई स्टैक्ड शैडो भी शामिल हैं, जो आपकी स्टाइलशीट में चिपकाने को तैयार है।
कब उपयोगी है
किसी कार्ड या बटन को पेज से ऊपर उठाने हेतु सूक्ष्म छाया जोड़ना। किसी डिज़ाइन मॉकअप की छाया को मान अनुमान लगाए बिना मिलाना। कई परतों वाली यथार्थवादी स्तरित छाया बनाना। दबे या भीतर धँसे UI तत्वों हेतु inset छाया बनाना। गहरे या हल्के थीम हेतु छाया की कोमलता व रंग बारीकी से समायोजित करना। सीखना कि हर box-shadow मान परिणाम को कैसे प्रभावित करता है।
अक्सर पूछे जाने वाले प्रश्न
क्रम में: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या और स्प्रेड। ऑफ़सेट छाया को हिलाते हैं, ब्लर उसके किनारे को कोमल करता है, और स्प्रेड उसे बड़ा या छोटा करता है। इसके बाद रंग आता है, सूक्ष्मता हेतु प्रायः कम अपारदर्शिता का rgba()।
महत्वपूर्ण सूचनाएँ
भारी या अनेक box-shadow रेंडरिंग प्रदर्शन को नुकसान पहुँचा सकते हैं, विशेषकर एनिमेशन में। बार-बार हिलने या अपडेट होने वाले तत्वों पर छायाएँ सूक्ष्म रखें और स्टैक्ड परतें सीमित करें।