मुफ़्त CSS ग्रेडिएंट जनरेटर
विज़ुअल एडिटर के साथ सुंदर CSS ग्रेडिएंट बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
Gradient Generator
Create beautiful CSS gradients with multiple layers, color spaces, and export formats.
Preview
Export Code
Preset Gradients (56)
Layers (1)
Layer 1 Settings
Standard RGB mixing
Color Stops (2)
Color Harmony
Based on the first color stop: #667eea
About Gradient Generator
Create beautiful CSS gradients with support for multiple layers, color spaces, and export formats. Perfect for web design and UI development.
- Linear, radial, conic, repeating gradients
- Unlimited color stops with position control
- Multiple gradient layers with blend modes
- 56+ preset gradients in 7 categories
- Visual angle picker and direction presets
- CSS animation code generator
- Color harmony suggestions
- Save gradients to browser storage
- Beautiful random gradient generation
- CSS with vendor prefixes
- Tailwind CSS classes
- SCSS mixin
- LESS mixin
- SVG markup
- CSS animation keyframes
- PNG, JPG, WebP, SVG image download
- Custom export dimensions
- Use direction presets for quick angles
- Layer gradients for complex effects
- Try LAB for smoother gradients
- Preview on background images
- Use repeating mode for patterns
- Try color harmony for balanced palettes
- Save favorites to history for reuse
अक्सर पूछे जाने वाले प्रश्न
ग्रेडिएंट जेनरेटर क्या है?
ग्रेडिएंट जेनरेटर एक मुफ़्त ऑनलाइन टूल है जिसमें लीनियर, रेडियल और कॉनिक शैलियों सहित सुंदर CSS ग्रेडिएंट बनाने के लिए एक विज़ुअल एडिटर होता है।
क्या ग्रेडिएंट जेनरेटर मुफ़्त है?
हाँ, यह पूरी तरह से मुफ़्त है और इसके लिए किसी रजिस्ट्रेशन की ज़रूरत नहीं है। सारी ग्रेडिएंट क्रिएशन आपके ब्राउज़र में क्लाइंट-साइड पर होती है।
क्या मैं CSS कोड सीधे कॉपी कर सकता हूँ?
हाँ, ग्रेडिएंट जेनरेटर उपयोग के लिए तैयार CSS कोड प्रदान करता है जिसे आप सीधे अपनी स्टाइलशीट में कॉपी और पेस्ट कर सकते हैं।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। CSS ग्रेडिएंट जेनरेटर सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या CSS ग्रेडिएंट जेनरेटर मोबाइल डिवाइस पर काम करता है?
हाँ, CSS ग्रेडिएंट जेनरेटर पूरी तरह से रिस्पॉन्सिव है और स्मार्टफ़ोन तथा टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर उपयोग कर सकते हैं, किसी ऐप डाउनलोड की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या रजिस्ट्रेशन की ज़रूरत नहीं है। बस अपने ब्राउज़र में CSS ग्रेडिएंट जेनरेटर खोलें और तुरंत इसका उपयोग शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।
कौन-कौन से इमेज फ़ॉर्मैट समर्थित हैं?
CSS ग्रेडिएंट जेनरेटर PNG, JPG/JPEG, WebP और GIF सहित सामान्य इमेज फ़ॉर्मैट का समर्थन करता है। विशिष्ट टूल के आधार पर कुछ सुविधाएँ SVG और BMP का भी समर्थन कर सकती हैं।
मैं CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार कोई भी सेटिंग समायोजित करें, और टूल इसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को अपने क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
कौन-कौन से ब्राउज़र समर्थित हैं?
CSS ग्रेडिएंट जेनरेटर Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़रों में काम करता है। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
लीनियर, रेडियल और कॉनिक ग्रेडिएंट में क्या अंतर है?
तीनों ही रंगों को मिश्रित करते हैं, लेकिन उनकी ज्यामिति (geometry) अलग होती है। एक लीनियर ग्रेडिएंट एक सीधी रेखा के साथ, आपके द्वारा 0 से 360 डिग्री के बीच सेट किए गए एंगल पर ट्रांज़िशन करता है, जिससे रंग ऊपर-से-नीचे, बगल-से-बगल, या तिरछे बहते हैं। एक रेडियल ग्रेडिएंट एक केंद्र बिंदु से सर्कल या एलिप्स के रूप में बाहर की ओर फैलता है, जो स्पॉटलाइट या ग्लो इफ़ेक्ट के लिए उपयोगी है जहाँ एक रंग बीच में होता है। एक कॉनिक ग्रेडिएंट रंगों को घड़ी की सुइयों की तरह एक केंद्र बिंदु के चारों ओर घुमाता है, जिससे कलर व्हील, पाई-चार्ट सेगमेंट और एंगुलर एक्सेंट बनाए जाते हैं। यह टूल इन तीनों CSS फ़ंक्शंस को उनके अपने कंट्रोल्स के साथ सपोर्ट करता है — लीनियर के लिए एंगल और डायरेक्शन प्रीसेट, रेडियल के लिए शेप और सेंटर पोज़िशन, और कॉनिक के लिए स्टार्ट एंगल। ऊपर एक टाइप चुनें और कोड कॉपी करने से पहले नतीजे को लाइव प्रीव्यू करें।
CSS ग्रेडिएंट में कलर स्टॉप्स और स्टॉप पोज़िशन कैसे काम करते हैं?
एक कलर स्टॉप ग्रेडिएंट के साथ एक विशेष बिंदु पर रखा गया एक रंग होता है, जिसे CSS में एक रंग और प्रतिशत के रूप में लिखा जाता है, जैसे "#ff0000 0%, #0000ff 100%"। यह प्रतिशत ब्राउज़र को बताते हैं कि हर रंग पूरी ताकत पर कहाँ पहुँचता है; दो स्टॉप्स के बीच सब कुछ अपने आप ब्लेंड हो जाता है। दो स्टॉप्स को एक-दूसरे के करीब लाने पर ट्रांज़िशन ज़्यादा तीखा हो जाता है; उन्हें फैलाने पर यह नरम हो जाता है। आप दो तक सीमित नहीं हैं — बीच के पोज़िशन पर और स्टॉप्स जोड़कर आप ग्रेडिएंट को कई रंगों से गुज़ार सकते हैं, हालाँकि आमतौर पर दो या तीन रंग लंबे इंद्रधनुषी क्रम से ज़्यादा साफ़-सुथरे दिखते हैं। इस जनरेटर में हर लेयर असीमित स्टॉप्स स्वीकार करती है, हर स्टॉप का अपना कलर पिकर और हेक्स फ़ील्ड होता है, और एक खींचने योग्य बार से आप हर एक को 0 से 100% के बीच आँख से देखकर रीपोज़िशन कर सकते हैं। ऊपर स्टॉप्स एडजस्ट करें और CSS तुरंत अपडेट हो जाएगा।
ग्रेडिएंट इमेज फ़ाइल की जगह CSS ग्रेडिएंट का इस्तेमाल क्यों करें?
एक CSS ग्रेडिएंट ब्राउज़र द्वारा कोड की कुछ पंक्तियों से बनाया जाता है, इसलिए यह आपके पेज में शून्य इमेज बाइट्स जोड़ता है और किसी भी साइज़ पर बिल्कुल शार्प बना रहता है — फ़ोन हो या 4K डिस्प्ले, यह कभी भी उस तरह पिक्सलेटेड या धुंधला नहीं होता जैसे किसी स्केल किए गए JPG या PNG के साथ होता है। इससे पेज हल्के और तेज़ बने रहते हैं, और आप बाद में किसी एसेट को फिर से एक्सपोर्ट करने के बजाय सिर्फ़ टेक्स्ट एडिट करके रंग बदल सकते हैं। एक इमेज फ़ाइल तब भी काम आती है जब आपको स्लाइड डेक, ईमेल, या किसी सोशल पोस्ट के लिए एक फ्लैट बैकग्राउंड चाहिए, जहाँ CSS काम नहीं करेगा। यह टूल दोनों मामलों को कवर करता है: तुरंत इस्तेमाल के लिए तैयार CSS कॉपी करें (एक ठोस फ़ॉलबैक रंग के साथ), या उसी ग्रेडिएंट को PNG, JPG, WebP, या SVG के रूप में एक कस्टमाइज़ करने योग्य साइज़ पर एक्सपोर्ट करें, जिसका डिफ़ॉल्ट साइज़ 1920×1080 है। ऊपर अपना ग्रेडिएंट बनाएं, फिर कोड या डाउनलोड करने योग्य इमेज चुनें।
मैं रिपीटिंग ग्रेडिएंट धारियाँ या पैटर्न कैसे बनाऊँ?
रिपीटिंग ग्रेडिएंट्स कलर स्टॉप्स के एक सेट को एक स्मूद फ़ेड की बजाय एक टाइल्ड पैटर्न में बदल देते हैं। CSS में इसके लिए repeating- वैरिएंट्स इस्तेमाल होते हैं, जैसे repeating-linear-gradient, जो आपके स्टॉप्स को लेकर उन्हें पूरे एलिमेंट में लूप करते हैं — इस तरह कुछ प्रतिशत की दूरी पर मौजूद दो स्टॉप्स समान रूप से फैली हुई धारियाँ बन जाती हैं, और एक कॉनिक वर्ज़न पाई या स्टारबर्स्ट पैटर्न बनाता है। यहाँ अहम बात आपके स्टॉप्स की स्पेसिंग है: टाइट, हार्ड-एज वाले स्टॉप्स स्पष्ट धारियाँ देते हैं, जबकि चौड़े या नरम स्टॉप्स धुंधली पट्टियों में बदल जाते हैं। इस जनरेटर में आप किसी भी लेयर को एक स्विच से उसके रिपीटिंग वैरिएंट में बदल सकते हैं, फिर स्ट्राइप की चौड़ाई और एंगल कंट्रोल करने के लिए स्टॉप पोज़िशन सेट कर सकते हैं। आप पैटर्न को प्लेड और मेश में ओवरलैप करने के लिए कई लेयर्स भी स्टैक कर सकते हैं। ऊपर किसी लेयर पर रिपीट चालू करें, स्टॉप्स एडजस्ट करें, और नतीजे में मिलने वाला CSS कॉपी करें।
ईज़िंग सेटिंग ग्रेडिएंट ट्रांज़िशन पर क्या असर डालती है?
ईज़िंग यह बदलती है कि रंग स्टॉप्स के बीच कितनी तेज़ी से ब्लेंड होते हैं, न कि कौन-से रंग दिखाई देते हैं। डिफ़ॉल्ट रूप से एक ग्रेडिएंट लीनियर तरीके से इंटरपोलेट होता है, यानी रंग एक स्थिर दर से बदलता है और सटीक मिडपॉइंट एक हार्ड, थोड़ा धुंधला बैंड जैसा दिख सकता है — खासकर दो गहरे (saturated) रंगों के बीच। एक ease-in, ease-out, या ease-in-out कर्व इस ब्लेंड को फिर से बाँट देता है ताकि ज़्यादातर ट्रांज़िशन एक छोर के पास हो, जिससे मिडपॉइंट नरम हो जाता है और फ़ेड टेक्स्ट या UI के पीछे ज़्यादा स्मूद और स्वाभाविक महसूस होता है। यह एक हल्का लेकिन असली गुणवत्ता वाला लीवर है जिसे कई हाथ से लिखे गए ग्रेडिएंट्स छोड़ देते हैं। यह टूल लीनियर, ease-in, ease-out, और ease-in-out विकल्प देता है और इस चुनाव को जनरेट किए गए कोड में शामिल कर देता है, ताकि जो लुक आप प्रीव्यू में देखें वही आखिर में मिले। ऊपर ईज़िंग बदलकर एक कड़े मिडपॉइंट को नरम करने की कोशिश करें, फिर CSS कॉपी करें।
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/image-tools-gradient-generator" title="Free CSS 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/image-tools/gradient-generator?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free CSS Gradient Generator</a> by The Toolbox</p>संबंधित टूल
मुफ़्त ऑनलाइन इमेज रिसाइज़र
छवियों का आकार किसी भी आयाम में बदलें। आस्पेक्ट रेशियो बनाए रखें या कस्टम आकार सेट करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त ऑनलाइन इमेज कंप्रेसर
गुणवत्ता खोए बिना फ़ाइल का आकार कम करने के लिए छवियों को कंप्रेस करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त ऑनलाइन इमेज क्रॉपर
विज़ुअल एडिटर से छवियों को किसी भी आकार या आस्पेक्ट रेशियो में क्रॉप करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त Favicon जनरेटर
एक ही छवि से सभी आकारों में favicon बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
CSS ग्रेडिएंट जनरेटर के बारे में
CSS ग्रेडिएंट जनरेटर एक मुफ़्त विज़ुअल एडिटर है जिससे आप कलर ग्रेडिएंट बना सकते हैं और उन्हें इस्तेमाल करने के लिए एकदम सही कोड कॉपी कर सकते हैं। आप अपने रंग चुनते हैं, स्टॉप्स को जहाँ चाहें वहाँ खींचकर रखते हैं, एक दिशा चुनते हैं, और यह टूल तुरंत मैचिंग CSS लिख देता है। यह फ्रंट-एंड डेवलपर्स, डिज़ाइनरों और उन सभी के लिए बनाया गया है जो किसी वेबसाइट, ऐप या सोशल ग्राफ़िक को स्टाइल करते समय linear-gradient() सिंटैक्स हाथ से लिखकर नतीजे का अंदाज़ा लगाने के बजाय ग्रेडिएंट को सीधे देखना पसंद करते हैं।
सब कुछ आपके ब्राउज़र में ही होता है। न कोई साइन-अप चाहिए, न कोई वॉटरमार्क, और कुछ भी सर्वर पर अपलोड नहीं होता — ग्रेडिएंट को नेटिव CSS से रेंडर किया जाता है और इमेज एक्सपोर्ट्स को आपकी अपनी डिवाइस पर Canvas API से बनाया जाता है। इसका मतलब है कि आप अपने ब्रांड रंगों या अभी तक जारी न हुए डिज़ाइनों के साथ बेझिझक प्रयोग कर सकते हैं, और यह काम कभी आपकी मशीन से बाहर नहीं जाता।
तीन ग्रेडिएंट टाइप और लेयर्ड बिल्ड
यह एडिटर तीन CSS ग्रेडिएंट फ़ंक्शंस को सपोर्ट करता है, हर एक के अपने कंट्रोल्स के साथ:
- लीनियर (Linear) — रंग एक सीधी रेखा के साथ मिश्रित होते हैं; 0 से 360 डिग्री तक कोई भी एंगल सेट करें, या "to top right" जैसा कोई डायरेक्शनल प्रीसेट इस्तेमाल करें।
- रेडियल (Radial) — रंग एक बिंदु से बाहर की ओर फैलते हैं; सर्कल या एलिप्स शेप चुनें और X/Y प्रतिशत से केंद्र की स्थिति तय करें।
- कॉनिक (Conic) — रंग एक केंद्र बिंदु के चारों ओर कलर व्हील की तरह घूमते हैं, जिसमें स्टार्ट एंगल और सेंटर पोज़िशन एडजस्ट किए जा सकते हैं।
आप कई ग्रेडिएंट लेयर्स जोड़ सकते हैं जो एक ही बैकग्राउंड में स्टैक होकर आती हैं, और किसी भी लेयर को रिपीटिंग वैरिएंट में बदलकर उन्हीं कलर स्टॉप्स से धारियाँ (stripes) और पैटर्न बना सकते हैं। हर लेयर में असीमित कलर स्टॉप्स जोड़े जा सकते हैं, हर स्टॉप का अपना कलर पिकर और हेक्स फ़ील्ड होता है, और एक खींचने योग्य ग्रेडिएंट बार से आप स्टॉप्स को 0 से 100% के बीच आँख से देखकर रीपोज़िशन कर सकते हैं। एक ईज़िंग विकल्प (ease-in, ease-out, ease-in-out, या सादा लीनियर) यह तय करता है कि रंग कैसे ट्रांज़िशन होंगे।
कॉपी-रेडी कोड और इमेज एक्सपोर्ट्स
जब ग्रेडिएंट सही लगने लगे, तो जनरेटर उसे आपके प्रोजेक्ट में इस्तेमाल होने वाले फ़ॉर्मेट में आउटपुट करता है। एक क्लिक में साफ़-सुथरा CSS कॉपी हो जाता है (एक ठोस फ़ॉलबैक रंग के साथ), या आप Tailwind CSS, SCSS, LESS, या एक SVG ग्रेडिएंट डेफ़िनिशन ले सकते हैं। अगर आपको कोड की जगह एक फ्लैट एसेट चाहिए — किसी स्लाइड डेक, हीरो बैकग्राउंड, या सोशल पोस्ट के लिए — तो ग्रेडिएंट को PNG, JPG, WebP, या SVG फ़ाइल के रूप में एक कस्टमाइज़ करने योग्य साइज़ पर एक्सपोर्ट करें, जिसका डिफ़ॉल्ट साइज़ 1920×1080 है।
यह इसलिए मायने रखता है क्योंकि ग्रेडिएंट्स के प्रदर्शन (performance) और गुणवत्ता के मामले में असली फ़ायदे हैं। एक CSS ग्रेडिएंट ब्राउज़र द्वारा रेंडर किया जाता है, इसलिए यह किसी भी स्क्रीन साइज़ पर एकदम शार्प बना रहता है और इमेज डाउनलोड में शून्य बाइट्स जोड़ता है — जबकि एक JPG बैकग्राउंड की एक तय रेज़ोल्यूशन और वज़न होता है। जनरेट किए गए कोड का इस्तेमाल करने से आपका डिज़ाइन 4K डिस्प्ले और फ़ोन दोनों पर वेक्टर जैसा शार्प बना रहता है।
शुरुआती बिंदु और प्रेरणा
अगर आप किसी खास पैलेट से शुरुआत नहीं कर रहे हैं, तो यह टूल 56 प्रीसेट ग्रेडिएंट्स के साथ आता है जो सात कैटेगरी में बँटे हैं — Warm, Cool, Nature, Purple, Dark, Light, और Multi — ताकि आप शुरू से बनाने के बजाय एक तैयार कॉम्बिनेशन लोड करके उसे थोड़ा बदल सकें। जब आपको सिर्फ़ आइडिया चाहिए तो एक Randomize बटन तुरंत एक नया ग्रेडिएंट जनरेट कर देता है, और Reset सब कुछ एक साफ़ दो-रंग वाले डिफ़ॉल्ट पर वापस ले आता है।
कुछ व्यावहारिक टिप्स: दो या तीन रंगों के बीच का ग्रेडिएंट लंबे इंद्रधनुषी (rainbow) क्रम की तुलना में ज़्यादा साफ़-सुथरा दिखता है; ग्रेडिएंट और उसके ऊपर रखे किसी भी टेक्स्ट के बीच पढ़ने लायक कंट्रास्ट बनाए रखें; और जब कोई ग्रेडिएंट कंटेंट के पीछे हो, तो ईज़िंग सेटिंग एक कड़े मिडपॉइंट को नरम कर सकती है। ऊपर कोई प्रीसेट चुनें या अपने खुद के रंग सेट करें, स्टॉप्स को फ़ाइन-ट्यून करें, फिर CSS कॉपी करें या इमेज डाउनलोड करें — जो भी आपके प्रोजेक्ट को चाहिए।