कई रंग पड़ावों के साथ रैखिक, त्रिज्यीय और शंक्वाकार CSS ग्रेडिएंट बनाएँ और कोड कॉपी करें।

पूर्वावलोकन
CSS आउटपुट
background: ;

सब कुछ आपके ब्राउज़र में चलता है — कोई अपलोड नहीं, कोई साइन-अप नहीं।

ग्रेडिएंट प्रकार
deg
रंग पड़ाव पड़ाव जोड़ने के लिए बार पर क्लिक करें, खींचकर हिलाएँ
चयनित पड़ाव
पड़ाव रंग
100%
%
प्रीसेट

CSS ग्रेडिएंट जेनरेटर के बारे में

CSS Gradient Generator पूर्ण विज़ुअल नियंत्रण के साथ linear, radial और conic ग्रेडिएंट बनाता है। ग्रेडिएंट बार पर क्लिक करके कलर स्टॉप जोड़ें, उन्हें खींचकर पुनर्स्थापित करें, और हर स्टॉप को अपना रंग, अपारदर्शिता और पोज़िशन दें। linear ग्रेडिएंट को एक एंगल नियंत्रण मिलता है; radial को आकार (circle या ellipse) और पोज़िशन; conic को एक प्रारंभिक एंगल।

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

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

CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें

  1. ग्रेडिएंट प्रकार चुनें: linear, radial या conic।
  2. एंगल सेट करें (linear), आकार और पोज़िशन (radial), या प्रारंभिक एंगल (conic)।
  3. कलर स्टॉप जोड़ने के लिए ग्रेडिएंट बार पर क्लिक करें और उन्हें पोज़िशन में खींचें।
  4. हर स्टॉप को उसका रंग, अपारदर्शिता और सटीक पोज़िशन दें।
  5. तुरंत प्रेरणा के लिए प्रीसेट या रैंडमाइज़ बटन आज़माएं।
  6. ग्रेडिएंट वैल्यू या पूरा CSS नियम कॉपी करें।

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

Linear ग्रेडिएंट किसी एंगल पर एक सीधी रेखा के साथ रंगों को मिलाते हैं। Radial ग्रेडिएंट एक केंद्र बिंदु से circle या ellipse के रूप में बाहर की ओर फैलते हैं। Conic ग्रेडिएंट एक केंद्र बिंदु के चारों ओर रंगों को घुमाते हैं — यही तकनीक pie chart और कलर व्हील के पीछे है।

कम से कम दो, बिना किसी व्यावहारिक ऊपरी सीमा के। दो या तीन स्टॉप साफ़ बैकग्राउंड बनाते हैं; बारीकी से रखे स्टॉप कठोर कलर बैंड बनाते हैं, जिससे धारीदार और खंडित प्रभाव बनते हैं।

हां — हर स्टॉप का अपना अपारदर्शिता नियंत्रण है। 0% अपारदर्शिता वाला स्टॉप ग्रेडिएंट को फ़ेड कर देता है, जो किसी टिंटेड ओवरले को फ़ोटो में मिलाने या हीरो सेक्शन को पेज बैकग्राउंड में फ़ेड करने का मानक तरीका है।

सीधे तौर पर नहीं — ब्राउज़र ग्रेडिएंट वैल्यू के बीच ट्रांज़िशन नहीं कर सकते। सामान्य तरीके: एक बड़े ग्रेडिएंट पर background-position को एनिमेट करना, कस्टम प्रॉपर्टी के साथ conic ग्रेडिएंट को घुमाना, या दो लेयर्ड एलिमेंट को क्रॉस-फ़ेड करना।

हां, मुफ़्त और असीमित। यह पूरी तरह आपके ब्राउज़र में चलता है, इसलिए आपकी बनाई कोई भी चीज़ स्टोर या ट्रांसमिट नहीं होती।

इसे साझा करें

लोकप्रिय खोजें
css ग्रेडिएंट जेनरेटर लीनियर ग्रेडिएंट css जेनरेटर रेडियल ग्रेडिएंट css कॉनिक ग्रेडिएंट css css बैकग्राउंड ग्रेडिएंट मेकर ग्रेडिएंट कलर स्टॉप टूल css ग्रेडिएंट कोण पिकर ऑनलाइन ग्रेडिएंट जेनरेटर
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।
समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।