ग्रेडिएंट जनरेटर
विज़ुअल नियंत्रण और कोड आउटपुट के साथ CSS ग्रेडिएंट बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
Gradient Generator
Create stunning CSS gradients with a pro-grade visual editor. Linear, radial, conic, and mesh gradients with 58+ presets, drag-to-reorder stops, multiple preview modes, animated gradients, and PNG/SVG/JPG export.
Live Preview
Gradient Settings
Hard Stops
Sharp transitions between color stops
Color Stops
Preset Library
Generated Code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);About Gradient Generator
- Linear, radial, conic, and mesh gradient types
- Multiple color stops with drag-to-reorder on the gradient bar
- Per-stop opacity control with rgba output and opacity preview swatch
- Interactive angle dial — click or drag to set direction
- Hard stops toggle for sharp, no-blend transitions
- Distribute stops evenly and add complementary color
- 58+ curated preset gradients in 7 categories
- 4-point and 6-point mesh gradient generator
- 5 preview modes: Swatch, Text, Button, Card, Border
- Animated gradient preview (continuous rotation)
- Adjustable canvas size for precise export dimensions
- Export as PNG, JPG, or SVG image
- History with visual thumbnails and one-click restore (last 20)
- CSS, Tailwind, styled-components, CSS Variables, and value-only output
Privacy First: All processing happens locally in your browser. No data is sent to any server.
Related Tools
अक्सर पूछे जाने वाले प्रश्न
Linear, radial, और conic gradient में क्या अंतर है?
ये तीनों CSS gradient प्रकार रंग के एलिमेंट में फैलने के तरीके में अलग होते हैं। Linear gradient रंगों को एक सीधी रेखा में आपके द्वारा निर्धारित 0 से 360 डिग्री के कोण पर मिलाता है, जो बैकग्राउंड, बटन और हीरो बैनर के लिए उपयुक्त है। Radial gradient रंग को केंद्र बिंदु से बाहर की ओर एक वृत्त या दीर्घवृत्त के रूप में फैलाता है, जिससे स्पॉटलाइट या ग्लो प्रभाव बनता है। Conic gradient रंगों को केंद्र बिंदु के चारों ओर एक कलर व्हील की तरह घुमाता है, जो पाई चार्ट, लोडर और कलर-पिकर UI के लिए आदर्श है। यह टूल mesh gradient भी प्रदान करता है, जो कई radial blend को लेयर करके मॉडर्न लैंडिंग पेजों पर दिखने वाले सॉफ़्ट, मल्टी-डायरेक्शनल लुक बनाता है। आप एडिटर में चारों स्टाइल के बीच स्विच कर सकते हैं और प्रीव्यू को तुरंत अपडेट होते देख सकते हैं, फिर मैचिंग CSS कॉपी कर सकते हैं ताकि आप जो डिज़ाइन देखते हैं वही शिप हो।
CSS gradient में कलर स्टॉप कैसे काम करते हैं?
कलर स्टॉप एक विशिष्ट बिंदु पर रखा गया एक ही रंग है जो gradient के साथ चलता है, और ब्राउज़र लगातार स्टॉप्स के बीच चिकनाई से रंगों को मिलाता है। प्रत्येक स्टॉप की दो मुख्य सेटिंग्स होती हैं: एक रंग मान और एक स्थिति, जो आम तौर पर gradient रेखा पर 0 से 100 तक प्रतिशत के रूप में व्यक्त की जाती है। दो स्टॉप्स एक सरल दो-रंगों का फ़ेड देते हैं, जबकि ज़्यादा स्टॉप्स जोड़ने से आप मल्टी-कलर ब्लेंड, रेनबो या ब्रांडेड पैलेट बना सकते हैं। आप प्रति-स्टॉप ओपैसिटी भी सेट कर सकते हैं ताकि ट्रांसपेरेंट फ़ेड बनें जो एलिमेंट के पीछे जो कुछ है उसे दिखाए। अगर आप hard-stops टॉगल ऑन करते हैं, तो ब्लेंडिंग पूरी तरह बंद हो जाती है और आसन्न स्टॉप्स क्रिस्प कलर बैंड बनाते हैं, जो स्ट्राइप्स, फ़्लैग और डुओटोन ब्लॉक के लिए उपयोगी है। इस जनरेटर में आप जितने चाहें उतने स्टॉप्स जोड़ सकते हैं, प्रत्येक को सटीक स्थिति पर ड्रैग कर सकते हैं, और परिणामी कोड को एक क्लिक में कॉपी कर सकते हैं।
मैं linear gradient का कोण या दिशा कैसे सेट करूँ?
CSS में, एक linear gradient की दिशा डिग्री में मापे गए कोण द्वारा नियंत्रित होती है। ज़ीरो डिग्री ब्लेंड को ऊपर की ओर इशारा करता है, 90 डिग्री बाएँ से दाएँ चलता है, 180 डिग्री नीचे की ओर इशारा करता है, और 270 डिग्री दाएँ से बाएँ चलता है, इसलिए 0 से 360 तक कोई भी मान आपको ब्लेंड को सटीक रूप से घुमाने देता है। आप रॉ CSS में "to right" या "to bottom" जैसे कीवर्ड डायरेक्शन भी इस्तेमाल कर सकते हैं, लेकिन संख्यात्मक कोण ज़्यादा बेहतर नियंत्रण देता है। इस टूल में आप एक लाइव कैनवास पर कोण एडजस्ट करते हैं और gradient को तुरंत घूमते देखते हैं, इसलिए अनुमान लगाने की ज़रूरत नहीं है कि कौन सा मान आपके चाहे लुक से मेल खाता है। Linear और conic स्टाइल के लिए आप एक एनिमेशन विकल्प भी चालू कर सकते हैं जो लगातार कोण घुमाता है ताकि आप मोशन प्रीव्यू कर सकें। एक बार सही दिखने पर, अपने प्रोजेक्ट के लिए सटीक CSS, Tailwind, या styled-components आउटपुट कॉपी करें।
क्या मैं gradient को CSS के बजाय PNG या SVG इमेज के रूप में एक्सपोर्ट कर सकता हूँ?
हाँ। जबकि CSS gradient को आम तौर पर लाइव कोड के रूप में छोड़ना सबसे अच्छा होता है ताकि वे किसी भी आकार पर क्रिस्प रहें और कोई इमेज वज़न न जोड़ें, कभी-कभी आपको एक फ़्लैट फ़ाइल चाहिए होती है। यह जनरेटर आपके gradient को PNG, JPG, या SVG इमेज के रूप में एक्सपोर्ट कर सकता है, जो तब उपयोगी है जब आप डिज़ाइन टूल, स्लाइड डेक, सोशल ग्राफ़िक, या ऐसे प्लेटफ़ॉर्म के लिए बैकग्राउंड ऐसेट चाहते हैं जो रॉ CSS स्वीकार नहीं करता। PNG और JPG आपको एक फ़िक्स्ड रास्टर इमेज देते हैं, जबकि SVG को स्केलेबल वेक्टर डेटा के रूप में रखता है जो हाई-डेंसिटी डिस्प्ले पर शार्प रहता है। हालाँकि, वेब प्रोजेक्ट के लिए, CSS, Tailwind, styled-components, या CSS-वैरिएबल आउटपुट कॉपी करना हल्का और ज़्यादा फ्लेक्सिबल है क्योंकि ब्राउज़र इसे नेटिवली रेंडर करता है। कैनवास पर अपना gradient बनाएँ, फिर इस आधार पर कोड या इमेज एक्सपोर्ट चुनें कि इसे कहाँ इस्तेमाल करना है।
मेरे CSS gradient चिकने दिखने के बजाय बैंडेड या स्टेप्ड क्यों दिखते हैं?
बैंडिंग वह दृश्य स्टेपिंग है जो आप कभी-कभी रंगों के बीच देखते हैं, जहाँ ब्लेंड एक स्थिर फ़ेड के बजाय स्ट्राइप्स जैसा दिखता है। यह आम तौर पर तब होता है जब दो स्टॉप्स ह्यू या ब्राइटनेस में बहुत अलग होते हैं और डिस्प्ले की कलर डेप्थ सीमित होती है, इसलिए बीच के रंग एक छोटे सेट तक राउंड हो जाते हैं। इसे कम करने के लिए, अपने कलर स्टॉप्स को टोन में क़रीब रखें, उनके बीच एक इंटरमीडिएट स्टॉप जोड़ें, या ऐसे रंग चुनें जिनमें लाइटनेस का कम जंप हो। सुनिश्चित करें कि आपने गलती से hard-stops टॉगल ऑन नहीं किया है, जो जानबूझकर ब्लेंडिंग हटाकर शार्प बैंड बनाता है। सूक्ष्म, लो-कॉन्ट्रास्ट gradient सबसे ज़्यादा बैंड करते हैं, इसलिए थोड़ा एक्स्ट्रा कॉन्ट्रास्ट विरोधाभासी रूप से ज़्यादा चिकना दिख सकता है। इस जनरेटर के लाइव प्रीव्यू का इस्तेमाल स्टॉप प्लेसमेंट टेस्ट करने के लिए करें, प्रीव्यू-ऑन-बटन या कार्ड मोड आज़माएँ ताकि इसे संदर्भ में जज कर सकें, और ब्लेंड चिकना दिखने पर साफ़ परिणाम कॉपी करें।
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/utility-tools-gradient-generator" title="Gradient Generator — The Toolbox" width="100%" height="380" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/utility-tools/gradient-generator?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Gradient Generator</a> by The Toolbox</p>संबंधित टूल
मुफ़्त सुरक्षित पासवर्ड जनरेटर
अनुकूलन योग्य विकल्पों के साथ सुरक्षित, यादृच्छिक पासवर्ड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त UUID/GUID जनरेटर
सार्वभौमिक रूप से अद्वितीय पहचानकर्ता (UUID/GUID) बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त QR कोड जनरेटर ऑनलाइन
URL, टेक्स्ट, WiFi क्रेडेंशियल और बहुत कुछ के लिए QR कोड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON फ़ॉर्मेटर और वैलिडेटर
सिंटैक्स हाइलाइटिंग और त्रुटि पहचान के साथ JSON डेटा को फ़ॉर्मेट, सत्यापित और सुंदर बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
CSS Gradient Generator के बारे में
CSS Gradient Generator एक मुफ़्त विज़ुअल एडिटर है जो कलर gradient बनाता है और वह सटीक कोड एक्सपोर्ट करता है जिसकी आपको किसी वेबसाइट में डालने के लिए ज़रूरत है। linear-gradient() सिंटैक्स का अनुमान लगाने या अच्छे ढंग से मिलने वाले hex मान खोजने के बजाय, आप एक लाइव कैनवास पर रंग चुनते हैं और परिणाम को तुरंत अपडेट होते देखते हैं। यह फ़्रंट-एंड डेवलपर्स, वेब डिज़ाइनर्स और हर उस व्यक्ति के लिए बना है जो किसी लैंडिंग पेज, बटन, हीरो बैनर या कार्ड को स्टाइल कर रहा है और ब्राउज़र छोड़े बिना एक पॉलिश्ड gradient चाहता है।
सब कुछ आपकी डिवाइस पर लोकल रूप से चलता है। कोई साइन-अप नहीं, कोई अपलोड नहीं, और कोई सर्वर राउंड-ट्रिप नहीं — gradient आपके एडिट करते ही आपके ब्राउज़र में जनरेट होता है, इसलिए आपका काम प्राइवेट रहता है और टूल एक बार पेज लोड होने के बाद धीमे कनेक्शन पर भी काम करता रहता है।
आप क्या बना सकते हैं
जनरेटर चार gradient स्टाइल सपोर्ट करता है, प्रत्येक अपने कंट्रोल के साथ:
- Linear — 0 से 360 डिग्री तक आपके द्वारा सेट किए गए कोण पर एक सीधा कलर ब्लेंड।
- Radial — केंद्र बिंदु से बाहर की ओर रंग, एक वृत्त या दीर्घवृत्त के रूप में, एडजस्टेबल ओरिजिन पोज़िशन के साथ।
- Conic — केंद्र बिंदु के चारों ओर कलर व्हील की तरह घूमते रंग, पाई-चार्ट और लोडर प्रभावों के लिए उपयोगी।
- Mesh — मॉडर्न हीरो सेक्शन पर लोकप्रिय सॉफ़्ट, मल्टी-डायरेक्शनल लुक के लिए कई ओवरलैपिंग radial ब्लेंड।
आप जितने चाहें उतने कलर स्टॉप्स जोड़ सकते हैं, प्रत्येक की सटीक स्थिति gradient के साथ सेट कर सकते हैं, और ट्रांसपेरेंट फ़ेड के लिए प्रति-स्टॉप ओपैसिटी 0 से 100 प्रतिशत तक एडजस्ट कर सकते हैं। एक hard stops टॉगल ब्लेंडिंग को पूरी तरह बंद कर देता है, एक चिकने gradient को क्रिस्प कलर बैंड्स में बदल देता है — स्ट्राइप्स, फ़्लैग और डुओटोन ब्लॉक्स के लिए उपयोगी।
प्रीसेट और हेल्पर्स के साथ तेज़ी से काम करना
टूल 50 से ज़्यादा रेडी-मेड प्रीसेट के साथ आता है जो Warm, Cool, Nature, Dark, Vivid और Pastel जैसी श्रेणियों में व्यवस्थित हैं, जिनमें Instagram और Stripe जैसे ब्रांड-इन्स्पायर्ड ब्लेंड शामिल हैं। एक को शुरुआती बिंदु के रूप में लोड करें और वहाँ से ट्वीक करें। स्पीड-अप हेल्पर्स में एक Random बटन जो एक ताज़ा पैलेट जनरेट करता है, रंग क्रम फ़्लिप करने के लिए Reverse, स्टॉप्स का एक shuffle, और एक history पैनल जो आपके हाल के gradient याद रखता है (20 तक) ताकि आप किसी पुराने वर्ज़न पर वापस जा सकें।
एक gradient को एक अमूर्त स्वैच के बजाय संदर्भ में जज करने के लिए, आप इसे पाँच तरीकों से प्रीव्यू कर सकते हैं — एक सादे स्वैच के रूप में, टेक्स्ट के पीछे, एक बटन पर, एक कार्ड बैकग्राउंड के रूप में, या एक बॉर्डर के रूप में। एक फुलस्क्रीन मोड gradient को किनारे से किनारे दिखाता है, और linear तथा conic प्रकारों के लिए एक animation विकल्प लगातार कोण घुमाता है ताकि आप देख सकें कि यह कैसे चलता है।
कोड कॉपी करना और इमेज एक्सपोर्ट करना
जब gradient सही दिखे, अपने स्टैक के फिट बैठने वाले फॉर्मैट में प्रोडक्शन-रेडी आउटपुट कॉपी करें:
- CSS — मानक
linear-gradient,radial-gradient, याconic-gradient()डिक्लेरेशन। - Tailwind CSS — Tailwind प्रोजेक्ट्स के लिए यूटिलिटी-क्लास मार्कअप।
- styled-components — CSS-in-JS वर्कफ़्लो के लिए एक स्निपेट।
- CSS variables — थीमिंग के लिए कस्टम प्रॉपर्टीज़।
- Value only — केवल gradient मान, बिना प्रॉपर्टी नाम के, मौजूदा नियमों में स्लॉट करने के लिए।
फ़्लैट इमेज पसंद है? Gradient को PNG, JPG, या SVG फ़ाइल के रूप में एक्सपोर्ट करें ताकि डिज़ाइन टूल्स, स्लाइड डेक या सोशल ग्राफ़िक में बैकग्राउंड ऐसेट के रूप में इस्तेमाल कर सकें।
Gradient क्यों मायने रखते हैं
Gradient वह गहराई और विज़ुअल इंटरेस्ट जोड़ते हैं जो एक फ़्लैट फिल नहीं कर सकता, जो इसका कारण है कि वे मॉडर्न इंटरफ़ेस में दिखते हैं — ऐप ऑनबोर्डिंग स्क्रीन से लेकर मार्केटिंग पेजों तक। चूँकि CSS gradient ब्राउज़र द्वारा रेंडर किए जाते हैं, वे इमेज वज़न में कुछ नहीं खर्च करते, किसी भी स्क्रीन साइज़ पर ब्लर किए बिना स्केल करते हैं, और हाई-डेंसिटी डिस्प्ले पर क्रिस्प रहते हैं। एक अच्छा gradient ब्रांड कलर भी सुदृढ़ करता है और आँख को कॉल टू एक्शन की ओर ले जाता है। CSS Gradient Generator आपको विज़ुअल परिणाम और साफ़, कॉपी-पेस्ट कोड एक जगह देता है, ताकि आप जो डिज़ाइन देखते हैं वही शिप हो।