CSS ग्रेडिएंट जनरेटर
बैकग्राउंड ग्रेडिएंट को विज़ुअल तरीके से डिज़ाइन करें और इस्तेमाल के लिए तैयार CSS कॉपी करें। कलर स्टॉप को बार पर खींचें, नया स्टॉप जोड़ने के लिए बार पर क्लिक करें, कोण या केंद्र बदलें और रंगों को पारदर्शी करें। कोड में पुराने ब्राउज़र के लिए एक ठोस बैकअप रंग भी शामिल होता है।
इसका उपयोग कैसे करें
- लीनियर, रेडियल या कोनिक चुनें, या प्रीसेट या रैंडम ग्रेडिएंट से शुरू करें।
- किसी स्टॉप पर क्लिक करके उसका रंग, अपारदर्शिता और स्थिति बदलें; उसे खींचें, या दूसरा जोड़ने के लिए बार पर क्लिक करें।
- CSS कॉपी करें और एलिमेंट के रूल में पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या अंतर है?
लीनियर ग्रेडिएंट आपके चुने कोण पर सीधी रेखा के साथ रंग बदलता है। रेडियल ग्रेडिएंट केंद्र से वृत्त या दीर्घवृत्त के रूप में फैलता है। कोनिक ग्रेडिएंट केंद्र के चारों ओर घड़ी की सुइयों की तरह घूमता है, जो कलर व्हील और पाई चार्ट के लिए उपयोगी है।
क्या CSS ग्रेडिएंट सभी ब्राउज़र में काम करते हैं?
हाँ। लीनियर, रेडियल और कोनिक ग्रेडिएंट Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्ज़न में बिना प्रीफ़िक्स के काम करते हैं। बैकग्राउंड की पहली लाइन सादा रंग है, जिसे सिर्फ़ बहुत पुराने ब्राउज़र इस्तेमाल करते हैं।
धारियाँ कैसे बनाऊँ?
हर धारी की शुरुआत और अंत में एक ही रंग के दो स्टॉप रखें ताकि रंग घुलने के बजाय अचानक बदले, और Repeat चालू करें। आख़िरी प्रीसेट इसका उदाहरण है।
🏷️ मेटा टैग जनरेटर
🖼️ ओपन ग्राफ (Open Graph) जनरेटर
🔗 UTM लिंक बिल्डर
🔲 CSS बॉक्स शैडो (box-shadow) जनरेटर