मेरे टूल

CSS ग्रेडिएंट जनरेटर

प्रकार और रंग चुनें — साफ़, कॉपी करने लायक CSS ग्रेडिएंट लाइव अपडेट होता है, दिखाई देने वाले प्रीव्यू के साथ।

90°

प्रीव्यू

इसका उपयोग कैसे करें

  1. पेज खुलते ही स्क्रीन पर एक ग्रेडिएंट मौजूद होता है — पहले नतीजे के लिए कोई क्लिक नहीं करना पड़ता।
  2. प्रकार चुनें: “लीनियर” किसी कोण की दिशा में जाता है, “रेडियल” एक सर्कल से फैलता है, “कोनिक” केंद्र के चारों ओर घूमता है। लीनियर और कोनिक के लिए स्लाइडर से कोण बदलें।
  3. चयनकर्ता से रंग सेट करें और हर स्टॉप की स्थिति (0–100%) खींचकर तय करें। मल्टी-स्टॉप ग्रेडिएंट चाहिए तो “+ रंग जोड़ें” से और रंग जोड़ें; घटाकर दो तक लाएँ।
  4. नीचे CSS लाइव अपडेट होता है — एक क्लिक में कॉपी करें और जहाँ भी CSS स्वीकार होता है, वहाँ पेस्ट करें।

उदाहरण

सेटिंग्स

लीनियर · 90° · #FF5733 @0% → #33A1FF @100%

CSS

linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)

यह मानक लीनियर ग्रेडिएंट है — बाईं ओर #FF5733 से दाईं ओर #33A1FF तक; 90deg का मतलब “दाईं ओर” है। “रेडियल” से radial-gradient(circle, #FF5733 0%, #33A1FF 100%) मिलता है, और “कोनिक” से conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%)। सब कुछ सादा ASCII है और बिना किसी बदलाव के किसी भी CSS में पेस्ट हो जाता है।

दायरा, सीमाएँ और आम सवाल

  • सिर्फ़ अपारदर्शी रंग: चयनकर्ता ब्राउज़र के रंग पिकर हैं, उनमें alpha नहीं दिखता। पारदर्शिता के लिए पहले रंग को alpha रूप में बदलें, फिर यहाँ लौटें।
  • सिर्फ़ एक मानक सेगमेंट: लीनियर, रेडियल या कोनिक — कोई -webkit- प्रीफ़िक्स नहीं, कोई लेयर्ड/मल्टी-बैकग्राउंड ट्रिक नहीं, कोई रेडियल साइज़िंग या केंद्र स्थिति नहीं।
  • स्टॉप उसी क्रम में रहते हैं जैसे आप जोड़ते हैं — इन्हें ऑटो-सॉर्ट नहीं किया जाता, इसलिए क्रम से बाहर स्थिति जान-बूझकर एक सख्त जंप बनाती है।
  • 2 से 8 स्टॉप के बीच। एक स्टॉप पर आने पर ग्रेडिएंट रुक जाता है (सूचना के साथ), नकली ग्रेडिएंट नहीं बनाया जाता।
  • कोई प्रीसेट लाइब्रेरी नहीं, कोई पूरे पेज का बैकग्राउंड अप्लाई नहीं, कोई शेयर लिंक नहीं जो ग्रेडिएंट साथ ले जाए — शेयर बटन सिर्फ़ पेज का URL शेयर करता है; कुछ भी अपलोड, स्टोर या URL में नहीं लिखा जाता।
  • रेडियल ग्रेडिएंट के लिए कोण का कोई अर्थ नहीं, इसलिए कोण कंट्रोल छिप जाता है और जनरेटेड कोड में कोण नहीं होता।

ग्रेडिएंट मिलने के बाद आमतौर पर लोग आगे यही चाहते हैं।

कलर कनवर्टर

रैंडम कलर जनरेटर