CSS Box Shadow जनरेटर
CSS Box Shadow क्या है?
CSS box-shadow प्रॉपर्टी किसी एलिमेंट के फ्रेम के चारों ओर छाया प्रभाव जोड़ती है। छाया को ऑफसेट, धुंधला, फैलाया, रंगा और inset (आंतरिक छाया) के रूप में सेट किया जा सकता है। कॉमा से अलग की गई कई छाया को समृद्ध प्रभावों के लिए स्तरित किया जा सकता है। यह जनरेटर आपको जटिल बहु-स्तरीय छाया विज़ुअली बनाने और क्लिपबोर्ड पर पेस्ट के लिए तैयार CSS कॉपी करने देता है।
Box Shadow जनरेटर का उपयोग कैसे करें
-
छाया को स्थिति देने और आकार देने के लिए Offset X/Y, Blur और Spread स्लाइडर समायोजित करें।
-
छाया का रंग चुनने के लिए कलर स्वॉच पर क्लिक करें, और पारदर्शिता के लिए Opacity स्लाइडर का उपयोग करें।
-
आंतरिक चमक या दबाया हुआ प्रभाव बनाने के लिए 'Inset' टॉगल करें।
-
कई छाया को स्टैक करने के लिए '+ लेयर जोड़ें' क्लिक करें।
-
जनरेट किया गया CSS कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
box-shadow और drop-shadow filter में क्या अंतर है? box-shadow तत्व के आयताकार सीमा बॉक्स के चारों ओर छाया जोड़ता है और इनसेट छाया का समर्थन करता है। CSS filter: drop-shadow() तत्व के दृश्य आकार पर लागू होता है (पारदर्शिता सहित), जिससे यह पारदर्शी पृष्ठभूमि वाली PNG जैसी गैर-आयताकार रूपरेखाओं का पालन करता है।
मैं Material Design कार्ड ऊंचाई प्रभाव कैसे बनाऊं? दो box shadows को स्टैक करें: एक नरम परिवेश छाया (बड़ा blur, कम opacity, थोड़ा spread) और एक मुख्य छाया (छोटा blur, अधिक opacity, दिशात्मक ऑफसेट)। उदाहरण के लिए: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08)।
क्या box-shadow पृष्ठ लेआउट को प्रभावित करता है? नहीं। box-shadow दस्तावेज़ प्रवाह में तत्व के आकार या स्थिति को प्रभावित नहीं करता है। outline के विपरीत, यह लेआउट स्थान नहीं लेता है और अन्य तत्वों को नहीं धकेलेगा।
क्या मैं box-shadow को एनिमेट कर सकता हूँ? हाँ। box-shadow को CSS transitions और animations के साथ एनिमेट किया जा सकता है। प्रदर्शन के लिए, केवल तभी box-shadow को संक्रमण करना पसंद करें जब आवश्यक हो — ब्राउज़र box-shadow परिवर्तनों को GPU-त्वरान्वित नहीं कर सकते जैसे वे transform या opacity करते हैं।
Keywords: CSS box shadow जनरेटर, box-shadow CSS, CSS छाया टूल, CSS drop shadow, inset shadow, बहु-स्तरीय छाया, CSS shadow ऑनलाइन