CSS बॉक्स शैडो जनरेटर
मुफ्त ऑनलाइन CSS box-shadow जनरेटर। समायोज्य ऑफसेट, ब्लर, स्प्रेड, रंग और इनसेट के साथ विज़ुअली सुंदर छायाएं बनाएं। लाइव पूर्वावलोकन और तत्काल कोड कॉपी।
CSS box-shadow क्या है?
CSS box-shadow एक CSS संपत्ति है जो एक तत्व के फ्रेम के चारों ओर छाया प्रभाव जोड़ती है। यह आपको ऑफसेट, ब्लर त्रिज्या, स्प्रेड त्रिज्या और रंग मान निर्दिष्ट करके ड्रॉप शैडो, इनर शैडो और कई शैडो परतें बनाने की अनुमति देती है।
box-shadow के पैरामीटर क्या हैं?
box-shadow संपत्ति कई मानों को स्वीकार करती है: क्षैतिज ऑफसेट (X), लंबवत ऑफसेट (Y), ब्लर त्रिज्या, स्प्रेड त्रिज्या, रंग और वैकल्पिक inset कीवर्ड। आप अल्पविराम द्वारा अलग किए गए कई शैडो भी निर्दिष्ट कर सकते हैं।
inset कीवर्ड क्या है?
inset कीवर्ड शैडो को बाहरी शैडो (ड्रॉप शैडो) से आंतरिक शैडो में बदलता है। जब inset निर्दिष्ट किया जाता है, तो शैडो तत्व की सीमा के बाहर के बजाय अंदर खींची जाती है, जिससे इनसेट प्रभाव बनता है।
ब्लर त्रिज्या क्या है?
ब्लर त्रिज्या निर्धारित करती है कि शैडो का किनारा कितना धुंधला होता है। 0 का मान एक तेज, ठोस किनारा बनाता है। बड़े मान अधिक प्रसारित, नरम शैडो बनाते हैं जो तत्व से आगे तक फैलता है।
स्प्रेड त्रिज्या क्या है?
स्प्रेड त्रिज्या शैडो के आकार का विस्तार या संकुचन करती है। सकारात्मक मान शैडो को तत्व से बड़ा बनाते हैं, जबकि नकारात्मक मान इसे छोटा बनाते हैं। यह ब्लर लागू होने से पहले शैडो को प्रभावित करता है।
मैं कई शैडो कैसे बना सकता हूं?
आप प्रत्येक शैडो परिभाषा को अल्पविराम से अलग करके कई शैडो बना सकते हैं। प्रत्येक शैडो में अलग-अलग ऑफसेट, ब्लर, स्प्रेड और रंग मान हो सकते हैं। शैडो उस क्रम में लागू होते हैं जिसमें उन्हें घोषित किया जाता है, पहला शैडो शीर्ष पर होता है।
क्या मैं शैडो के लिए RGBA रंगों का उपयोग कर सकता हूं?
हां, आप किसी भी CSS रंग प्रारूप का उपयोग कर सकते हैं जिसमें RGBA, HSLA, HEX या नामित रंग शामिल हैं। RGBA और HSLA विशेष रूप से अर्ध-पारदर्शी शैडो बनाने के लिए उपयोगी हैं जो पृष्ठभूमि के साथ स्वाभाविक रूप से मिल जाते हैं।
मैं उत्पन्न CSS कोड कैसे कॉपी करूं?
बस जनरेटर इंटरफ़ेस में "कोड कॉपी करें" बटन पर क्लिक करें। CSS कोड आपके क्लिपबोर्ड पर कॉपी हो जाएगा और सीधे आपकी स्टाइलशीट या HTML फ़ाइल में पेस्ट किया जा सकता है।
क्या box-shadow सभी ब्राउज़रों में समर्थित है?
हां, box-shadow सभी आधुनिक ब्राउज़रों में समर्थित है जिसमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। यह 2011 से CSS3 का हिस्सा रहा है और इसकी उत्कृष्ट ब्राउज़र संगतता है।
क्या box-shadow प्रदर्शन को प्रभावित करता है?
box-shadow का आधुनिक ब्राउज़रों पर प्रदर्शन प्रभाव नगण्य होता है। हालांकि, कई तत्वों पर बड़े ब्लर त्रिज्या वाले कई जटिल शैडो का उपयोग करने से रेंडरिंग प्रदर्शन प्रभावित हो सकता है, विशेष रूप से मोबाइल उपकरणों पर।
box-shadow के सामान्य उपयोग मामले क्या हैं?
सामान्य उपयोगों में कार्ड एलिवेशन प्रभाव बनाना, बटन में गहराई जोड़ना, इनसेट फॉर्म फ़ील्ड बनाना, मटेरियल डिज़ाइन शैडो लागू करना और ओवरलैपिंग तत्वों के बीच दृश्य पृथक्करण जोड़ना शामिल है।
क्या मैं box-shadow को एनिमेट कर सकता हूं?
हां, box-shadow को CSS ट्रांज़िशन या एनिमेशन का उपयोग करके एनिमेट किया जा सकता है। हालांकि, box-shadow को एनिमेट करना प्रदर्शन-गहन हो सकता है। बेहतर प्रदर्शन के लिए, इसके बजाय ओपैसिटी ट्रांज़िशन के साथ छद्म-तत्वों का उपयोग करने पर विचार करें।
CSS बॉक्स शैडो जनरेटर का उपयोग कैसे करें
संख्याएँ अंदाज़ से न आज़माएँ — इस टूल से CSS box-shadow को दृश्य रूप से डिज़ाइन करें। जेनरेटर आपके ब्राउज़र में लोकल चलता है और आपका डेटा अपलोड नहीं होता।
- H-Offset और V-Offset सेट करके शैडो को क्षैतिज और लंबवत हिलाएँ।
- Blur बढ़ाकर किनारों को मुलायम करें और Spread से शैडो छोटा-बड़ा करें।
- Color चुनें और Opacity एडजस्ट करें ताकि शैडो ज़्यादा नैचुरल दिखे।
- Inset चुनें तो शैडो एलिमेंट के अंदर बनती है, बाहर नहीं।
- प्रीव्यू से तैयार box-shadow रूल कॉपी करके स्टाइलशीट में पेस्ट करें।
छोटा Blur और थोड़ा सकारात्मक V-Offset एलिमेंट के ठीक नीचे हल्की, वास्तविक जैसी कॉन्टैक्ट शैडो बनाता है।
संबंधित टूल
- CSS बॉर्डर रेडियस जनरेटर विज़ुअल CSS बॉर्डर रेडियस जनरेटर। प्रत्येक कोने को स्वतंत्र रूप से समायोजित करें, रियल-टाइम प्रीव्यू देखें और CSS कोड तुरंत कॉपी करें।
- CSS ग्रेडिएंट जनरेटर विज़ुअली शानदार CSS ग्रेडिएंट बनाएं। कई रंग स्टॉप, कस्टम कोण और स्थितियों के साथ रैखिक, रेडियल और कोनिक ग्रेडिएंट उत्पन्न करें। तुरंत प्रोडक्शन-रेडी कोड कॉपी करें।
- CSS Grid जनरेटर लाइव पूर्वावलोकन के साथ मुफ्त विज़ुअल CSS Grid जनरेटर। इंटरैक्टिव रूप से रिस्पॉन्सिव ग्रिड लेआउट डिज़ाइन करें और प्रोडक्शन-रेडी CSS कोड तुरंत निर्यात करें।
- CSS Flexbox जनरेटर लाइव पूर्वावलोकन के साथ विज़ुअल CSS Flexbox जनरेटर। Flex गुणों को समायोजित करें और तुरंत उपयोगी CSS कोड प्राप्त करें।
- बॉर्डर रेडियस जेनरेटर मुफ्त ऑनलाइन बॉर्डर रेडियस जेनरेटर। 8 हैंडल खींचें या ब्लॉब प्रीसेट चुनें, जैविक CSS आकार बनाएं और कोड तुरंत कॉपी करें।
- रंग परिवर्तक मुफ्त ऑनलाइन रंग परिवर्तक। विज़ुअल पिकर के साथ HEX, RGB, HSL, HSV प्रारूपों को तुरंत बदलें। 100% निजी, आपके ब्राउज़र में चलता है।
- CSS ईज़िंग जनरेटर मुफ़्त ऑनलाइन CSS ईज़िंग जनरेटर। इंटरैक्टिव कर्व पर cubic-bezier कंट्रोल पॉइंट खींचें, 18 प्रीसेट में से चुनें, लूपिंग बॉल प्रीव्यू देखें और टाइमिंग फंक्शन तुरंत कॉपी करें।
- CSS टेक्स्ट शैडो जनरेटर मुफ़्त ऑनलाइन text-shadow जनरेटर। ऑफसेट, ब्लर, रंग और अस्पष्टता के साथ कई शैडो लेयर स्टैक करें, नियॉन, 3D, रेट्रो प्रीसेट आज़माएँ और CSS तुरंत कॉपी करें।