इस उपकरण के बारे में
CSS ग्रेडिएंट जनरेटर रैखिक या रेडियल CSS ग्रेडिएंट से बैकग्राउंड बनाता है। हर रंग बिंदु का अलग रंग और प्रतिशत में स्थान होता है। बिंदु जोड़कर या हटाकर देखें कि रंगों का संक्रमण कैसे बदलता है।
कैसे इस्तेमाल करें
- रैखिक या रेडियल ग्रेडिएंट चुनें।
- 0–100% की स्थितियों पर 2–6 रंग बिंदु सेट करें।
- रैखिक ग्रेडिएंट में 0–360° का कोण चुनें। स्लाइडर और संख्या इनपुट साथ-साथ बदलते हैं।
- लाइव प्रीव्यू देखकर CSS कॉपी करें। रंग संयोजनों की तुलना के लिए “रीसेट करें” या “उदाहरण लोड करें” चुनें।
उदाहरण
- 0% पर लाल और 100% पर नीला एक साधारण दो रंगों वाला ग्रेडिएंट बनाते हैं।
- 50% पर तीसरा रंग जोड़ने से बीच का संक्रमण बदलता है।
- एक ही स्थिति पर रंग बिंदु रखने से रंगों के बीच स्पष्ट सीमा बनती है।
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);कार्यविधि और CSS विवरण
linear-gradient() दी गई दिशा में रंग बिंदुओं के बीच रंग मिलाता है; radial-gradient() केंद्र से बाहर की ओर रंग बदलता है। मान्य background घोषणा बनाने से पहले रंगों की अपारदर्शी HEX के रूप में और स्थितियों की प्रतिशत सीमा के अनुसार जाँच होती है।
सामान्य उपयोग
- वेबसाइट के बैकग्राउंड और बटन के रंग बनाना।
- कई रंगों वाले ग्रेडिएंट की दिशाओं की जल्दी तुलना करना।
- समझना कि रंग बिंदुओं की स्थिति संक्रमण को कैसे बदलती है।
गोपनीयता
आपका इनपुट और परिणाम केवल आपके ब्राउज़र में संसाधित होते हैं; उन्हें अपलोड या अपने आप सेव नहीं किया जाता। जिन परिणामों को रखना हो, उन्हें कॉपी करके संभालकर रखें।
FAQ
linear-gradient और radial-gradient में क्या अंतर है?
रैखिक ग्रेडिएंट में रंग सीधी दिशा में बदलते हैं। रेडियल ग्रेडिएंट में रंग केंद्र से बाहर की ओर बदलते हैं, सामान्यतः वृत्त या दीर्घवृत्त के आकार में।
क्या CSS ग्रेडिएंट एक चित्र है?
यह ब्राउज़र द्वारा बनाया गया CSS चित्र है। किसी चित्र फ़ाइल को डाउनलोड करने या ऑनलाइन जनरेशन सेवा की ज़रूरत नहीं होती।
रैखिक ग्रेडिएंट की दिशा कैसे बदलें?
कोण बदलें। 0deg ऊपर, 90deg दाईं ओर और 180deg नीचे की ओर दर्शाता है।
क्या तीन से ज़्यादा रंग इस्तेमाल कर सकते हैं?
हाँ। इस पेज पर 2–6 रंग बिंदु रख सकते हैं। हर बिंदु का अपना रंग और स्थान होता है।