Developer Tools
Web Utilities
Image ToolsCSS बॉक्स शैडो जनरेटर
कई परतों और रीयल-टाइम पूर्वावलोकन के साथ CSS box-shadow प्रभाव दृश्य रूप से बनाएं। धुंधलापन, प्रसार, रंग और अपारदर्शिता अनुकूलित करें।
शैडो सेटिंग्स
परत 1
पूर्वावलोकन और CSS कोड
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)संबंधित टूल
इस टूल के बारे में
यह कैसे काम करता है
- कई परतों के साथ CSS box-shadow प्रभाव दृश्य रूप से बनाएं
- शैडो पोजीशनिंग के लिए क्षैतिज और ऊर्ध्वाधर ऑफसेट समायोजित करें
- नरमाई और आकार के लिए ब्लर रेडियस और स्प्रेड नियंत्रित करें
- अपारदर्शिता नियंत्रण के साथ शैडो रंग अनुकूलित करें
- आंतरिक चमक प्रभाव के लिए inset शैडो जोड़ें
- जटिल गहराई प्रभाव के लिए कई शैडो लेयर करें
सामान्य उपयोग के मामले
- कार्ड डिज़ाइन में गहराई और ऊंचाई बनाना
- बटन और UI एलिमेंट में सूक्ष्म शैडो जोड़ना
- Neumorphic (soft UI) इंटरफेस डिज़ाइन करना
- कॉल-टू-एक्शन एलिमेंट के लिए ग्लो इफेक्ट बनाना
- Material design शैडो विनिर्देश लागू करना
- फ्लोटिंग और उठाए हुए एलिमेंट इफेक्ट बनाना
अक्सर पूछे जाने वाले प्रश्न
CSS में box shadow क्या है?
Box shadow एक CSS प्रॉपर्टी है जो किसी एलिमेंट के फ्रेम के चारों ओर शैडो इफेक्ट जोड़ती है। यह आपको शैडो के माध्यम से अपने डिज़ाइन में गहराई और ऊंचाई बनाने की अनुमति देता है।
कई शैडो परतें कैसे जोड़ूं?
'+ परत जोड़ें' बटन पर क्लिक करें। प्रत्येक परत को अलग-अलग पोजीशन, ब्लर, स्प्रेड, रंग और अपारदर्शिता के साथ स्वतंत्र रूप से अनुकूलित किया जा सकता है।
प्रत्येक शैडो पैरामीटर क्या नियंत्रित करता है?
क्षैतिज ऑफसेट शैडो को बाईं ओर (ऋणात्मक) या दाईं ओर (धनात्मक) ले जाता है। ऊर्ध्वाधर ऑफसेट ऊपर (ऋणात्मक) या नीचे (धनात्मक)। ब्लर रेडियस शैडो की नरमाई को नियंत्रित करता है।
Inset shadow क्या है?
Inset shadow एलिमेंट की बॉर्डर के अंदर खींची जाती है, बाहर नहीं। यह एलिमेंट के सतह में दबे होने का आभास देती है। किसी भी शैडो परत पर 'Inset' चेकबॉक्स चेक करें।
Neumorphic प्रभाव कैसे बनाएं?
Neumorphism दो शैडो का उपयोग करता है: एक हल्का और एक गहरा, विपरीत दिशाओं में। शुरुआती बिंदु के रूप में 'Neumorphism' या 'Neumorphism Inset' प्रीसेट का उपयोग करें।
क्या मैं नकारात्मक स्प्रेड मान उपयोग कर सकता हूं?
हाँ! नकारात्मक स्प्रेड मान ब्लर लागू करने से पहले शैडो को अंदर की ओर सिकोड़ते हैं। यह material design में अधिक यथार्थवादी शैडो बनाने के लिए उपयोग किया जाता है।
CSS कोड कैसे कॉपी करूं?
दो कॉपी विकल्प हैं: 'CSS कॉपी करें' पूरा CSS नियम देता है, और 'मान कॉपी करें' केवल box-shadow मान देता है जिसे किसी भी मौजूदा CSS नियम में पेस्ट किया जा सकता है।
प्रीसेट शैडो स्टाइल क्या हैं?
टूल में 12 प्रीसेट स्टाइल शामिल हैं: Soft, Medium, Large, Extra Large, Inner, Outline, Neumorphism, Neumorphism Inset, Colorful, Glow, Lifted और Floating।
क्या मैं box shadow से ग्लो इफेक्ट बना सकता हूं?
हाँ! 'Glow' प्रीसेट उपयोग करें या क्षैतिज और ऊर्ध्वाधर ऑफसेट 0 करके, बड़ा ब्लर रेडियस (20px या अधिक) और जीवंत रंग चुनकर अपना बनाएं।
शैडो अपारदर्शिता कैसे काम करती है?
अपारदर्शिता नियंत्रित करती है कि शैडो कितनी पारदर्शी या ठोस दिखती है, 0 (पूरी तरह पारदर्शी) से 1 (पूरी तरह अपारदर्शी) तक।
क्या box shadow सभी ब्राउज़र में समर्थित है?
हाँ, CSS box-shadow प्रॉपर्टी Chrome, Firefox, Safari, Edge और मोबाइल ब्राउज़र सहित सभी आधुनिक ब्राउज़र में अच्छी तरह समर्थित है।
क्या मैं box shadow को एनिमेट कर सकता हूं?
हाँ, box shadow को CSS transitions या animations का उपयोग करके एनिमेट किया जा सकता है। box-shadow पर transition प्रॉपर्टी उपयोग करें, उदाहरण: 'transition: box-shadow 0.3s ease'।