Box Shadow Generator
Generate CSS box shadows
छाया 1
क्षैतिज4px
ऊर्ध्वाधर4px
धुंधला16px
फैलाव0px
रंग
CSS आउटपुट
box-shadow: 4px 4px 16px 0px #00000033;
इस टूल के बारे में
क्षैतिज — धनात्मक छाया दाईं ओर, ऋणात्मक बाईं ओर खिसकाता है। ऊर्ध्वाधर — धनात्मक नीचे, ऋणात्मक ऊपर। धुंधला — बड़े मान नरम, फैली हुई छाया बनाते हैं। फैलाव — धनात्मक छाया बड़ा करता है, ऋणात्मक छोटा।
अंदर सक्षम करें तो अंदरूनी छाया बनती है। "+ छाया जोड़ें" से कई छायाएं जोड़ें — CSS में अल्पविराम से अलग, आगे से पीछे क्रम में परत बनती हैं।
कैसे उपयोग करें
- छाया का ऑफसेट सेट करने के लिए क्षैतिज और ऊर्ध्वाधर स्लाइडर समायोजित करें।
- मुलायम छाया के लिए धुंधला बढ़ाएं, या तीखी छाया के लिए 0 सेट करें।
- एलिमेंट से परे छाया का आकार बढ़ाने या घटाने के लिए फैलाव उपयोग करें।
- अधिक समृद्ध प्रभाव के लिए "+ छाया जोड़ें" क्लिक करके कई छायाएं परत बनाएं।
उपयोग के मामले
डिज़ाइनर कार्ड UI कंपोनेंट में गहराई के लिए box-shadow उपयोग करते हैं। inset छाया दबे हुए बटन प्रभाव बनाती है। कई परत वाली छायाएं परिवेश और मुख्य प्रकाश से यथार्थवादी प्रकाश व्यवस्था बनाती हैं।
अक्सर पूछे जाने वाले प्रश्न
- inset विकल्प क्या है? — inset छाया एलिमेंट की सीमा के बाहर नहीं बल्कि अंदर दिखती है। इनपुट और बटन पर दबे हुए प्रभाव बनाने के लिए उपयोगी।
- क्या मैं कई छायाएं जोड़ सकता हूं? — हां। "+ छाया जोड़ें" क्लिक करें। सभी छायाएं अल्पविराम से अलग एक box-shadow डिक्लेरेशन में जुड़ती हैं।
- ऋणात्मक फैलाव मान क्या करता है? — ऋणात्मक फैलाव छाया को एलिमेंट से छोटा बनाता है। ऑफसेट और धुंधले के साथ मिलकर केवल एक तरफ से झाँकती सूक्ष्म छाया बनाता है।