ऑनलाइन मुफ़्त CSS ग्रेडिएंट कैसे बनाएँ (2026 गाइड)

किसी भी आधुनिक वेबसाइट हेडर, ऐप पृष्ठभूमि या सोशल मीडिया ग्राफ़िक को देखें और आपको संभवतः ग्रेडिएंट दिखेगा — एक रंग से दूसरे रंग में सहज मिश्रण। ग्रेडिएंट वह गहराई और ऊर्जा जोड़ते हैं जो सपाट रंग नहीं दे सकते, और सबसे अच्छी बात यह है कि वे शुद्ध कोड हैं: कोई छवि फ़ाइल नहीं, कोई लोडिंग समय नहीं, असीम रूप से स्केलेबल। यह गाइड दिखाती है कि हमारे मुफ़्त ग्रेडिएंट जनरेटर से ग्रेडिएंट को दृश्य रूप से कैसे डिज़ाइन करें, उनके पीछे की CSS समझें, और उत्पादन-तैयार कोड सीधे अपने प्रोजेक्ट में कॉपी करें।

मुफ़्त ग्रेडिएंट जनरेटर क्या करता है

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

ग्रेडिएंट मूल बातें: लीनियर बनाम रेडियल

CSS दो मुख्य ग्रेडिएंट प्रकार देता है, और सही चुनना डिज़ाइन का आधा काम है:

• लीनियर ग्रेडिएंट एक सीधी रेखा के साथ रंग मिलाते हैं — ऊपर से नीचे, बाएँ से दाएँ, या किसी भी कोण पर। ये काम के घोड़े हैं: पेज पृष्ठभूमि, बटन, हेडर बैनर, कार्ड।
• रेडियल ग्रेडिएंट केंद्र बिंदु से वृत्त या दीर्घवृत्त में बाहर की ओर मिलते हैं — स्पॉटलाइट या चमक की तरह। विग्नेट, हाइलाइट प्रभाव और एक स्थान पर ध्यान आकर्षित करने के लिए बढ़िया।

ग्रेडिएंट अपने कलर स्टॉप से परिभाषित होता है: शामिल रंग और मिश्रण के साथ प्रत्येक कहाँ बैठता है। दो स्टॉप (शुरुआती रंग, अंतिम रंग) क्लासिक है; तीन या अधिक स्टॉप समृद्ध बहु-रंग संक्रमण बनाते हैं।

चरण-दर-चरण: अपना ग्रेडिएंट डिज़ाइन करें

1. ग्रेडिएंट जनरेटर खोलें। यह किसी भी आधुनिक ब्राउज़र में काम करता है — कुछ भी इंस्टॉल नहीं करना है।
2. अपने रंग चुनें। शुरुआत के लिए दो रंग चुनें। अनिश्चित हैं? रैंडम कलर पैलेट टूल से विचार बनाएँ, या कलर पिकर से सटीक ब्रांड शेड डायल करें।
3. दिशा तय करें। लीनियर ग्रेडिएंट के लिए, मिश्रण का कोण या दिशा चुनें (जैसे क्लासिक पृष्ठभूमि फ़ेड के लिए ऊपर-से-नीचे, अधिक ऊर्जा के लिए विकर्ण)।
4. लाइव प्रीव्यू देखें। प्रत्येक समायोजन प्रीव्यू को तुरंत अपडेट करता है — अंधेरे में हाथ से CSS लिखने के बजाय दृश्य जनरेटर का यही पूरा उद्देश्य है।
5. मिश्रण को परिष्कृत करें। कलर स्टॉप समायोजित करें: प्रत्येक रंग कहाँ शुरू और समाप्त होता है, उसे हिलाएँ। एक ओर धकेला गया स्टॉप असममित, अधिक गतिशील मिश्रण बनाता है; समान दूरी वाले स्टॉप शांत और संतुलित लगते हैं।
6. CSS कोड कॉपी करें। जब प्रीव्यू सही लगे, तो बनाया गया कोड कॉपी करें — यह आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है।
7. इसे अपनी CSS में पेस्ट करें, उदाहरण के लिए: background: linear-gradient(135deg, #3B82F6, #8B5CF6);

CSS पढ़ना (ताकि आप बाद में बदलाव कर सकें)

बनाया गया कोड एक बार डरावना लगता है, फिर हमेशा के लिए स्पष्ट। linear-gradient(135deg, #3B82F6, #8B5CF6) को लें:

• linear-gradient(...) — ग्रेडिएंट प्रकार।
• 135deg — मिश्रण रेखा का कोण (135° नीचे-बाएँ से ऊपर-दाएँ विकर्ण चलता है)।
• #3B82F6, #8B5CF6 — क्रम में कलर स्टॉप।

आप किसी भी स्टॉप में स्थिति जोड़ सकते हैं — #3B82F6 0%, #8B5CF6 100% — या तीन-रंग मिश्रण के लिए बीच का स्टॉप डाल सकते हैं। एक बार आप कोड पढ़ सकते हैं, तो छोटे बदलाव (तेज़ कोण, बदला हुआ स्टॉप) के लिए जनरेटर को फिर खोलने की ज़रूरत नहीं होती।

डिज़ाइन टिप्स: पेशेवर दिखने वाले ग्रेडिएंट

• समान रंग सुरक्षित दांव हैं। पहिए पर एक-दूसरे के पास के रंग (नीला → बैंगनी, टील → हरा) सहजता से मिलते हैं और शायद ही कभी ग़लत लगते हैं। उच्च-कंट्रास्ट जोड़े (लाल → हरा) कीचड़ भरे भूरे मध्यबिंदु बना सकते हैं — ध्यान से प्रीव्यू करें।
• मध्यबिंदु का ध्यान रखें। दो-रंग मिश्रण का बीच 50/50 मिश्रण होता है। अगर वह बीच का रंग गंदा लगता है, तो तीसरा स्टॉप जोड़ें या करीब के रंग चुनें।
• पृष्ठभूमि के लिए सूक्ष्म, ज़ोरदार से बेहतर है। दो करीबी शेड के बीच हल्का मिश्रण परिष्कार जोड़ता है; इंद्रधनुष ध्यान माँगता है। तीव्रता को तत्व के महत्व से मिलाएँ।
• ऊपर असली टेक्स्ट के साथ परीक्षण करें। भव्य ग्रेडिएंट बेकार है अगर आपका शीर्षक उसके किसी हिस्से पर अपठनीय हो जाता है। टेक्स्ट/पृष्ठभूमि जोड़ों को कंट्रास्ट चेकर से चलाएँ।
• डार्क मोड पर विचार करें। अगर आपकी साइट में डार्क थीम है, तो हल्के वाले को दोबारा उपयोग करने के बजाय दूसरा, गहरा ग्रेडिएंट वेरिएंट डिज़ाइन करें।
• ग्रेडिएंट कम उपयोग करें। एक ग्रेडिएंट हीरो सेक्शन और बाकी जगह सपाट रंग जानबूझकर किया गया लगता है। हर जगह ग्रेडिएंट अराजक लगता है।

ग्रेडिएंट कहाँ चमकते हैं (और कहाँ नहीं)

बढ़िया उपयोग: हीरो सेक्शन पृष्ठभूमि, कॉल-टू-एक्शन बटन, कार्ड हेडर, प्रोफ़ाइल बैनर, प्रस्तुति शीर्षक स्लाइड, सोशल मीडिया ग्राफ़िक्स, लोडिंग स्क्रीन।

दो बार सोचें: लंबी बॉडी टेक्स्ट पृष्ठभूमि (पठनीयता को नुकसान), छोटे UI तत्व (मिश्रण दिखने की जगह नहीं), डेटा विज़ुअलाइज़ेशन (ग्रेडिएंट भराव मानों की धारणा को विकृत कर सकता है), और कहीं भी जहाँ ब्रांड दिशानिर्देश सपाट रंग अनिवार्य करते हैं।

प्रदर्शन नोट: CSS ग्रेडिएंट छवियों को क्यों हराते हैं

CSS में लिखा ग्रेडिएंट टेक्स्ट के कुछ दर्जन बाइट होता है। वही दृश्य पृष्ठभूमि छवि के रूप में दसियों या सैकड़ों किलोबाइट होगा — साथ ही एक HTTP अनुरोध, साथ ही बड़ी स्क्रीन पर स्केलिंग दोष। CSS ग्रेडिएंट किसी भी रिज़ॉल्यूशन पर स्पष्ट रेंडर होते हैं, लोड करने में लगभग कुछ नहीं खर्च करते, और एनिमेट किए जा सकते हैं। जब भी ग्रेडिएंट पृष्ठभूमि छवि की जगह ले सके, उसे लेना चाहिए।

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

क्या ग्रेडिएंट जनरेटर मुफ़्त है?

हाँ — लाइव प्रीव्यू और कॉपी-तैयार CSS के साथ असीमित ग्रेडिएंट डिज़ाइन, कोई साइनअप नहीं।

लीनियर और रेडियल ग्रेडिएंट में क्या अंतर है?

लीनियर ग्रेडिएंट एक सीधी रेखा के साथ मिलते हैं (पृष्ठभूमि और बटन के लिए बढ़िया); रेडियल ग्रेडिएंट केंद्र बिंदु से बाहर की ओर मिलते हैं (चमक और स्पॉटलाइट के लिए बढ़िया)।

क्या मैं बनाई गई CSS व्यावसायिक रूप से उपयोग कर सकता हूँ?

हाँ — टूल द्वारा बनाई गई कोड किसी भी प्रोजेक्ट में उपयोग के लिए आपकी है, व्यावसायिक या अन्यथा।

मेरे ग्रेडिएंट का बीच कीचड़ भरा लगता है — इसे कैसे ठीक करूँ?

रंग पहिए पर एक-दूसरे के करीब दो रंग चुनें, या संक्रमण को नियंत्रित करने के लिए बीच का कलर स्टॉप जोड़ें। लाइव प्रीव्यू से इस पर प्रयोग करना आसान हो जाता है।

क्या CSS सभी ब्राउज़र में काम करेगी?

मानक linear-gradient और radial-gradient सिंटैक्स सभी आधुनिक ब्राउज़र द्वारा समर्थित है। जनरेटर मानक CSS आउटपुट करता है।

अपना ग्रेडिएंट डिज़ाइन करें: मुफ़्त ग्रेडिएंट जनरेटर · मुफ़्त कलर पिकर · मुफ़्त कंट्रास्ट चेकर