Glyph WidgetsGlyph Widgets
टूलके बारे मेंसंपर्कब्लॉगगोपनीयताशर्तेंविज्ञापन हटाएंKo-fi पर सहायता करें

© 2026 Glyph Widgets LLC. सर्वाधिकार सुरक्षित।

·

100% क्लाइंट-साइड प्रोसेसिंग

डेवलपर
टेक्स्ट और लेखन
इमेज और रंग
मीडिया
वेब और SEO
यूटिलिटीज़
गोपनीयता और सुरक्षा
कैलकुलेटर
  1. होम
  2. इमेज और रंग
  3. रंग टूल्स
  4. ग्रेडिएंट जेनरेटर

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

अंतिम अपडेट: 10 मार्च 2026

विज़ुअल एडिटर के साथ शानदार लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाएं। कई रंग स्टॉप जोड़ें, कोण समायोजित करें और CSS कोड तुरंत उत्पन्न करें।

विशेषताएँ

  • ▶लीनियर, रेडियल और कोनिक ग्रेडिएंट प्रकार
  • ▶कलर पिकर और पोजीशन स्लाइडर के साथ असीमित कलर स्टॉप
  • ▶ऊपर/नीचे नियंत्रणों से कलर स्टॉप्स पुनर्क्रमित करें
  • ▶लीनियर और कोनिक ग्रेडिएंट के लिए समायोज्य कोण (0°–360°)
  • ▶संपादन करते समय लाइव प्रीव्यू अपडेट होता है
  • ▶एक क्लिक से CSS कोड कॉपी करें
  • ▶ग्रेडिएंट को SVG फ़ाइल के रूप में निर्यात करें
  • ▶रंग और कोण को तुरंत रैंडमाइज़ करें
  • ▶URL के माध्यम से ग्रेडिएंट साझा करें
  • ▶प्रीसेट सहेजें और पुनर्स्थापित करें (सपोर्टर सुविधा)
  • ▶पुनर्स्थापना के साथ ग्रेडिएंट इतिहास (सपोर्टर सुविधा)
  • ▶100% क्लाइंट-साइड : कोई डेटा आपके ब्राउज़र से बाहर नहीं जाता

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

1

ग्रेडिएंट प्रकार चुनें

ग्रेडिएंट प्रकार बटनों से लीनियर, रेडियल, या कोनिक चुनें। लाइव प्रीव्यू तुरंत अपडेट होता है।

2

कलर स्टॉप्स कॉन्फ़िगर करें

अपने रंग परिभाषित करने के लिए कलर पिकर और पोजीशन स्लाइडर का उपयोग करें। अधिक रंगों के लिए 'स्टॉप जोड़ें' पर क्लिक करें या हटाने के लिए ट्रैश आइकन पर। ऊपर/नीचे तीरों से स्टॉप्स को पुनर्क्रमित करें।

3

कोण सेट करें

लीनियर और कोनिक ग्रेडिएंट के लिए, ग्रेडिएंट दिशा नियंत्रित करने के लिए एंगल स्लाइडर (0°–360°) खींचें। रेडियल ग्रेडिएंट कोण का उपयोग नहीं करते।

4

कॉपी या निर्यात करें

background प्रॉपर्टी को क्लिपबोर्ड पर कॉपी करने के लिए 'CSS कॉपी करें' पर क्लिक करें, या ग्रेडिएंट को SVG फ़ाइल के रूप में निर्यात करें। आप शेयर बटन का उपयोग करके अपना ग्रेडिएंट पुनर्निर्मित करने वाला लिंक भी भेज सकते हैं।

5

रैंडमाइज़ या रीसेट करें

एक यादृच्छिक कोण के साथ रैंडम दो-रंग ग्रेडिएंट उत्पन्न करने के लिए 'यादृच्छिक बनाएं' पर क्लिक करें, या सब कुछ डिफ़ॉल्ट सेटिंग्स पर रीसेट करने के लिए 'साफ़ करें' पर क्लिक करें।

कलर स्टॉप इंटरपोलेशन

प्रत्येक कलर स्टॉप 0% से 100% तक एक रंग और पोजीशन परिभाषित करता है। ब्राउज़र CSS ग्रेडिएंट स्पेसिफिकेशन के अनुसार आसन्न स्टॉप्स के बीच सहज संक्रमण की गणना करता है। जटिल बहुरंगी प्रभाव बनाने के लिए आप जितने चाहें उतने स्टॉप जोड़ सकते हैं।

लीनियर ग्रेडिएंट

टूल आपके चुने हुए कोण के साथ CSS linear-gradient() उत्पन्न करता है। रंग शुरुआती बिंदु से अंतिम बिंदु तक सीधी रेखा में मिश्रित होते हैं। कोण बदलने से ग्रेडिएंट की दिशा घूमती है।

रेडियल और कोनिक ग्रेडिएंट

रेडियल ग्रेडिएंट केंद्र से बाहर की ओर वृत्ताकार रंग संक्रमण उत्पन्न करने के लिए radial-gradient(circle) का उपयोग करते हैं। कोनिक ग्रेडिएंट आपके सेट किए गए कोण से शुरू करके केंद्र बिंदु के चारों ओर रंग घुमाने के लिए conic-gradient() का उपयोग करते हैं : पाई चार्ट, कलर व्हील और सजावटी प्रभावों के लिए उपयोगी।

SVG निर्यात

SVG के रूप में निर्यात करते समय, टूल आपके कलर स्टॉप्स को SVG ग्रेडिएंट एलिमेंट्स (linearGradient या radialGradient) में बदलता है और उन्हें एक स्वतंत्र SVG फ़ाइल में लपेटता है जिसे डिज़ाइन टूल्स में उपयोग या वेब पेजों में एम्बेड किया जा सकता है।

साझा करने योग्य URLs

आपका ग्रेडिएंट प्रकार, कोण और कलर स्टॉप्स पेज URL में एन्कोड किए जाते हैं। इस URL को साझा करने से कोई भी व्यक्ति बिना मैन्युअल रूप से पुनर्निर्माण किए अपने ब्राउज़र में ठीक वही ग्रेडिएंट खोल सकता है।

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

आप तीन प्रकार बना सकते हैं: लीनियर ग्रेडिएंट जो एक सीधी रेखा के साथ रंग मिलाते हैं, रेडियल ग्रेडिएंट जो एक केंद्र बिंदु से वृत्ताकार रूप में बाहर की ओर फैलते हैं, और कोनिक ग्रेडिएंट जो एक केंद्र बिंदु के चारों ओर कलर व्हील की तरह रंग घुमाते हैं।

संबंधित टूल

Color Picker

Pick any color

Color Blender

Blend two colors

Contrast Checker

Check WCAG color contrast ratios for accessibility compli...

Color Converter

Convert colors between HEX, RGB, HSL, HSB, and CMYK formats

0%
100%
background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);
शेयर करें

Saved Presets is a Supporter feature.

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.