CSS ग्रेडिएंट और शैडो जनरेटर इस्तेमाल कैसे करें
- 1
ग्रेडिएंट या बॉक्स शैडो चुनें
प्रीव्यू के ऊपर दिए टैब से दोनों एडिटर के बीच बदलें।
- 2
प्रीसेट से शुरू करें
प्रीसेट टाइल पर क्लिक करके उसे लोड करें, या डिफ़ॉल्ट रखकर वहीं से बदलाव करें।
- 3
विज़ुअली एडजस्ट करें
कलर स्टॉप खींचें और एंगल सेट करें, या शैडो लेयर जोड़कर ऑफ़सेट, ब्लर और स्प्रेड ठीक करें।
- 4
कोड कॉपी करें
CSS या Tailwind क्लास कॉपी करें और अपने प्रोजेक्ट में पेस्ट करें।
सीमाएँ और Pro
साइन-अप के बिना मुफ़्त: असीमित कलर स्टॉप और शैडो लेयर, 3 ग्रेडिएंट प्रकार, रंग मिश्रण के 3 कलर स्पेस और 24 प्रीसेट।
Pro में विज्ञापन नहीं दिखते; दोनों एडिटर हर प्लान में पूरे मिलते हैं। Pro देखें
CSS ग्रेडिएंट और शैडो जनरेटर के बारे में
ग्रेडिएंट और शैडो CSS के वे दो इफ़ेक्ट हैं जिन्हें लोग ब्राउज़र के डेव टूल्स में अक्सर बार-बार आज़माकर ठीक करते हैं। यह जनरेटर दोनों के लिए एक विज़ुअल एडिटर और बड़ा लाइव प्रीव्यू देता है, फिर सटीक CSS और उससे मेल खाती Tailwind क्लास लिख देता है, जैसे bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]। आप नतीजा सीधे स्टाइलशीट या className में पेस्ट कर सकते हैं।
ग्रेडिएंट एडिटर लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाता है। स्टॉप बार पर क्लिक करके उस जगह नया रंग जोड़ें, स्टॉप को खींचकर हिलाएँ या सटीक पोज़िशन के लिए ऐरो कीज़ इस्तेमाल करें, और हर स्टॉप की अपनी ओपेसिटी रखें। लीनियर और कोनिक ग्रेडिएंट में एंगल मिलता है, रेडियल और कोनिक में केंद्र बिंदु, रेडियल में गोला या अंडाकार आकार, और कोई भी ग्रेडिएंट धारियों और छल्लों के लिए दोहराया जा सकता है। आप रंग मिश्रण का कलर स्पेस भी चुन सकते हैं: OKLab और OKLCH गहरे रंगों के बीच वह धूसर, मटमैला हिस्सा नहीं आने देते जो पुराने sRGB मिश्रण में दिखता है, और सभी मौजूदा ब्राउज़र इन्हें सपोर्ट करते हैं।
बॉक्स शैडो एडिटर में जितनी चाहें उतनी लेयर जोड़ सकते हैं। हर लेयर में X और Y ऑफ़सेट, ब्लर, स्प्रेड, ओपेसिटी वाला रंग, इनसेट स्विच और दिखाने-छिपाने का टॉगल होता है। लेयर का क्रम बदला जा सकता है, क्योंकि पहली लेयर सबसे ऊपर बनती है। साइज़, कोने की गोलाई और रंग बदलने लायक प्रीव्यू बॉक्स असर को हल्की या गहरी सतह पर दिखाता है।
हर एडिटर के बारह प्रीसेट शुरुआत के लिए मौजूद हैं: सूर्यास्त, कलर व्हील और धारियाँ; Material एलिवेशन, लेयर्ड सॉफ़्ट शैडो, न्यूमॉर्फ़िज़्म और हार्ड ऑफ़सेट। यह टूल सिर्फ़ ग्रेडिएंट और बॉक्स शैडो बनाता है; text-shadow, filter: drop-shadow और SVG ग्रेडिएंट नहीं बनाता।
गोपनीयता
सब कुछ पेज के अंदर ही होता है: रंग और सेटिंग आपके ब्राउज़र से बाहर नहीं जातीं और कोई इमेज अपलोड नहीं होती। आपका मौजूदा ग्रेडिएंट और शैडो लोकल स्टोरेज में सेव रहता है, ताकि लौटने पर वे वैसे ही मिलें।
खूबियाँ
लीनियर, रेडियल और कोनिक
ओपेसिटी वाले खींचने लायक कलर स्टॉप, एंगल, केंद्र, आकार और दोहराने का मोड।
मल्टी-लेयर शैडो
असली गहराई के लिए शैडो लेयर जोड़ें, क्रम बदलें, छिपाएँ और इनसेट करें।
CSS और Tailwind
तैयार CSS या Tailwind की arbitrary-value क्लास कॉपी करें।