CSS ग्रेडिएंट जनरेटर: लाइव पूर्वावलोकन के साथ

इसका इस्तेमाल कैसे करें

ग्रेडिएंट का प्रकार चुनें: रंग एक रेखा पर बदलता है (रैखिक), केंद्र से फैलाव (वृत्ताकार), या किसी बिंदु के चारों ओर घुमाव (शंकु)।
रैखिक या शंकु ग्रेडिएंट के लिए कोण तय करें। वृत्ताकार पर यह लागू नहीं होता।
रंग-बिंदु में हर रंग चुनें और उसकी स्थिति प्रतिशत में दें। दो से छह तक बिंदु जोड़ें या हटाएँ।
CSS के नीचे कॉपी दबाएँ और लाइन अपनी स्टाइलशीट में चिपकाएँ, या कोई प्रीसेट लेकर शुरू करें।

तीन ग्रेडिएंट प्रकार

रैखिक: रंग एक सीधी रेखा के साथ बदलता है। 0deg कोण ऊपर की ओर इशारा करता है, और कोण घड़ी की दिशा में घूमता है, इसलिए 90deg बाएँ से दाएँ और 180deg ऊपर से नीचे चलता है।
वृत्ताकार: रंग केंद्र से वृत्त में फैलते हैं, पहले बिंदु से आखिरी तक।
शंकु: रंग केंद्र के चारों ओर घूमते हैं, घड़ी की सुई की तरह। कोण तय करता है कि पहला रंग कहाँ से शुरू होता है।

रंग-बिंदु और उनकी स्थितियाँ

रंग-बिंदु ग्रेडिएंट पर 0% से 100% तक की किसी स्थिति पर एक रंग है। एडिटर बिंदु स्थिति के क्रम में लिखता है, इसलिए आप जिस क्रम में उन्हें लिखते हैं, उससे तस्वीर नहीं बदलती। दो से छह बिंदु ग्रेडिएंट को पढ़ने में आसान और CSS को छोटा रखते हैं।

कोड वही मानक CSS सिंटैक्स है जो आज के ब्राउज़र पढ़ते हैं, और पूर्वावलोकन उसी मान से आपके ब्राउज़र में बनता है, इसलिए जो आप देखते हैं वही स्टाइलशीट पाती है।

हल किया हुआ उदाहरण: सूर्योदय प्रीसेट

सूर्योदय प्रीसेट एक रैखिक ग्रेडिएंट है, 135deg पर, जो ऊपर बाएँ से नीचे दाएँ की ओर चलता है। इसमें तीन बिंदु हैं: 0% पर नारंगी, 50% पर पीला और 100% पर गुलाबी।

उसका CSS है: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

अक्सर पूछे जाने वाले सवाल

रैखिक ग्रेडिएंट में 0deg का क्या मतलब है?

0deg ऊपर की ओर इशारा करता है, इसलिए इस कोण पर रंग नीचे से ऊपर बदलते हैं। कोण घड़ी की दिशा में घूमता है: 90deg बाएँ से दाएँ जाता है और 180deg ऊपर से नीचे।

मेरे रंग-बिंदु कोड में अलग क्रम में क्यों हैं?

कोड बिंदुओं को स्थिति के क्रम में लिखता है, क्योंकि CSS उन्हें उसी क्रम में पढ़ता है। अगर आप 20% से पहले 80% लिखें, तो कोड पहले 20% दिखाता है, और तस्वीर वही रहती है।

क्या पारदर्शी रंग इस्तेमाल कर सकते हैं?

यह एडिटर हेक्स में लिखे ठोस रंग लेता है। पारदर्शिता के लिए कोड हाथ से बदलें और alpha मान वाला रंग इस्तेमाल करें।

मैं कितने रंग-बिंदु इस्तेमाल कर सकता हूँ?

दो से छह। एडिटर संख्या उसी सीमा में रखता है, ताकि ग्रेडिएंट की हमेशा शुरुआत और अंत हो।

क्या यह कोड हर ब्राउज़र में चलता है?

सिंटैक्स वह मानक रूप है जिसे आज के ब्राउज़र सहारा देते हैं। परिणाम उन ब्राउज़रों में जाँचें जिन्हें आपके विज़िटर इस्तेमाल करते हैं, खासकर अगर आपको पुराने संस्करणों का भी ध्यान रखना है।

क्या मेरा डिज़ाइन कहीं भेजा जाता है?

नहीं। ग्रेडिएंट आपके ब्राउज़र में बनता है। कुछ भी सहेजा या सर्वर पर भेजा नहीं जाता।

क्या ग्रेडिएंट से टेक्स्ट का रंग बना सकते हैं?

यह टूल केवल background घोषणा लिखता है। टेक्स्ट के पीछे ग्रेडिएंट संभव है, पर उसके लिए इस टूल से ज्यादा CSS चाहिए।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।