CSS टूल्स/बॉक्स शैडो जेनरेटर
बॉक्स शैडो जेनरेटर
कई परतों और रियल-टाइम पूर्वावलोकन के साथ आश्चर्यजनक बॉक्स छाया बनाएं
पूर्वावलोकन
#F8FAFC
छाया परतें
परत 1
#0000001a
0px
4px
6px
-1px
परत 2
#0000001a
0px
2px
4px
-2px
प्रीसेट
Loading...CSS Box Shadow Guide
Learn how to create depth and dimension with shadows
What is Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radius, and color. It can create depth, highlight elements, and add visual interest to your designs.
How to Use This Tool
- Add shadow layers using the Add Layer button
- Adjust X/Y offset to position the shadow
- Control blur and spread for softness and size
- Toggle 'inset' for inner shadows, then copy the CSS
Pro Tips
- Use multiple subtle shadows for more realistic depth effects
- Negative spread values create tighter, more focused shadows
- Combine outer and inset shadows for neumorphism effects
Browser Support
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been widely supported since IE9, making it safe for production use.
अक्सर पूछे जाने वाले प्रश्न
box-shadow और drop-shadow में क्या अंतर है?
box-shadow एलिमेंट के पूरे बॉक्स (बॉर्डर सहित) पर छाया लागू करती है और आयताकार आकार बनाए रखती है। drop-shadow filter प्रॉपर्टी का हिस्सा है और एलिमेंट के वास्तविक आकार (पारदर्शी क्षेत्रों सहित) का अनुसरण करती है। PNG इमेज या अनियमित आकारों के लिए drop-shadow अधिक उपयुक्त है।
एकाधिक छायाएं कैसे लागू करें?
CSS में कई छायाओं को अल्पविराम से अलग करके एक box-shadow प्रॉपर्टी में घोषित किया जाता है। उदाहरण: 'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'. पहले घोषित छाया ऊपर प्रदर्शित होती है, और कई लेयर्स को मिलाने से अधिक यथार्थवादी गहराई प्राप्त होती है।
inset छाया का उपयोग कब करें?
inset कीवर्ड जोड़ने से छाया एलिमेंट के अंदर प्रदर्शित होती है, जिससे दबा हुआ इफ़ेक्ट बनता है। इनपुट फ़ील्ड, बटन दबाव स्थिति, न्यूमॉर्फिज़्म डिज़ाइन में अक्सर उपयोग किया जाता है। बाहरी और आंतरिक छायाओं का एक साथ उपयोग करने से त्रि-आयामी UI एलिमेंट बनाए जा सकते हैं।
छाया रंग कैसे चुनें?
प्राकृतिक छाया के लिए शुद्ध काले (#000) के बजाय पारदर्शिता वाले गहरे रंग का उपयोग करें। rgba(0, 0, 0, 0.1~0.3) रेंज सामान्य है। रंगीन डिज़ाइन में, बैकग्राउंड रंग से गहरे समान रंग परिवार का उपयोग करने से सामंजस्यपूर्ण छाया बनती है।
box-shadow प्रदर्शन को प्रभावित करती है?
कई एलिमेंट्स पर जटिल छायाएं (विशेष रूप से बड़ी blur वैल्यू) लागू करने से रेंडरिंग प्रदर्शन प्रभावित हो सकता है। स्क्रॉल या एनिमेशन के दौरान छाया बदलने से बचें, और यदि संभव हो तो will-change प्रॉपर्टी का उपयोग करें या इसके बजाय छाया इमेज का उपयोग करें।