झटपट जवाब
Linear, Radial या Conic चुनें, एंगल या केंद्र सेट करें, फिर हर स्टॉप (8 तक) के लिए रंग और पोज़िशन चुनें। प्रीव्यू तुरंत अपडेट होता है और नीचे का बॉक्स तैयार CSS दिखाता है, जैसे background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%); — उसे कॉपी करें, या ग्रेडिएंट को 1920×1080 PNG वॉलपेपर के रूप में डाउनलोड करें।
CSS ग्रेडिएंट जनरेटर क्या है?
CSS ग्रेडिएंट जनरेटर (CSS ग्रेडिएंट जनरेटर) आपको रंगों के ग्रेडिएंट देखकर डिज़ाइन करने और उनका मेल खाता CSS कोड पाने देता है। ग्रेडिएंट — एक रंग से दूसरे में स्मूद मिश्रण — आज के डिज़ाइन में हर जगह हैं: हीरो सेक्शन, बटन, कार्ड, ऐप बैकग्राउंड और YouTube थंबनेल। linear-gradient() हाथ से लिखना और नतीजा देखने के लिए पेज रीफ़्रेश करना धीमा है; जनरेटर में आप स्लाइडर खींचते हैं, लाइव प्रीव्यू देखते हैं और तैयार कोड कॉपी करते हैं।
यह मुफ़्त टूल CSS के तीनों ग्रेडिएंट प्रकार सपोर्ट करता है — linear, radial और conic — 2 से 8 कलर स्टॉप, बदलने लायक एंगल, आकार और केंद्र, नौ तैयार प्रीसेट, रैंडम और रिवर्स बटन, ठोस रंग वाले फ़ॉलबैक के साथ CSS आउटपुट, और जब ग्रेडिएंट इमेज के रूप में चाहिए तब 1920×1080 PNG डाउनलोड के साथ। सब कुछ आपके ब्राउज़र में चलता है।
मुख्य सुविधाएँ
- तीन ग्रेडिएंट प्रकार — linear, radial और conic।
- एंगल कंट्रोल linear और conic ग्रेडिएंट के लिए 0° से 360° तक।
- आकार और केंद्र radial (वृत्त या दीर्घवृत्त) के लिए और केंद्र conic के लिए।
- 8 तक कलर स्टॉप, हर एक में कलर पिकर, HEX फ़ील्ड और पोज़िशन स्लाइडर।
- नौ प्रीसेट जिनमें Ocean, Sunset, Mint और केसरिया-सफ़ेद-हरा Saffron प्रीसेट शामिल हैं।
- रैंडम और रिवर्स जल्दी प्रयोग के लिए।
- फ़ॉलबैक के साथ CSS — पेस्ट करने के लिए तैयार।
- PNG एक्सपोर्ट 1920×1080 पर, वॉलपेपर, थंबनेल और स्लाइड के लिए।
ग्रेडिएंट कैसे बनाएँ — स्टेप बाय स्टेप
- प्रकार चुनें: Linear, Radial या Conic।
- दिशा सेट करें: एंगल स्लाइडर खींचें, या आकार और केंद्र चुनें।
- कलर स्टॉप एडिट करें: रंग के बॉक्स पर क्लिक करें या HEX कोड टाइप करें, फिर पोज़िशन तय करने के लिए स्लाइडर खींचें।
- स्टॉप जोड़ें या हटाएँ “स्टॉप जोड़ें” और × बटन से (कम से कम 2, ज़्यादा से ज़्यादा 8)।
- आइडिया के लिए प्रीसेट, Random या Reverse आज़माएँ।
- CSS कॉपी करें या PNG डाउनलोड करें।
CSS ग्रेडिएंट सिंटैक्स की व्याख्या
| टाइप करें | उदाहरण | नतीजा |
|---|---|---|
| Linear | linear-gradient(90deg, #1B98E0 0%, #7B2FF7 100%) | बाईं ओर नीला और दाईं ओर बैंगनी |
| Radial | radial-gradient(circle at center, #FFFFFF 0%, #1B98E0 100%) | सफ़ेद केंद्र जो बाहर नीले में चमकता है |
| Conic | conic-gradient(from 0deg at center, red 0%, yellow 50%, red 100%) | रंग केंद्र के चारों ओर घूमते हुए |
| सख्त किनारा | linear-gradient(90deg, #FF9933 50%, #138808 50%) | दो ठोस हिस्से, कोई मिश्रण नहीं |
linear ग्रेडिएंट में एंगल CSS परंपरा का पालन करता है: 0deg ऊपर की ओर इशारा करता है, 90deg दाईं ओर, 180deg नीचे और 270deg बाईं ओर, घड़ी की दिशा में घूमते हुए। कीवर्ड भी चलते हैं — to right 90deg के बराबर है और to bottom right कोने की ओर इशारा करता है। radial ग्रेडिएंट के लिए, circle गोल आकार रखता है जबकि ellipse (CSS में डिफ़ॉल्ट) एलिमेंट के अनुपात में फैल जाता है। Conic ग्रेडिएंट from के बाद दिए गए एंगल से शुरू होकर केंद्र के चारों ओर घड़ी की दिशा में घूमते हैं।
कलर स्टॉप को समझना
हर स्टॉप का एक रंग और ग्रेडिएंट के साथ 0% से 100% तक एक पोज़िशन होती है। ब्राउज़र पास-पास के स्टॉप के बीच स्मूद मिश्रण करता है। कुछ काम के पैटर्न:
- बराबर मिश्रण — सादे दो-रंग वाले फ़ेड के लिए 0% और 100% पर स्टॉप।
- झुकाव — दूसरे स्टॉप को 30% पर ले जाएँ ताकि दूसरा रंग हावी रहे।
- सख्त किनारा — एक ही पोज़िशन पर दो स्टॉप तेज़ रेखा बनाते हैं, जो धारियों और बँटे बैकग्राउंड के लिए काम की है।
- तीन-रंग का झंडा — Saffron प्रीसेट #FF9933 0%, #FFFFFF 50%, #138808 100% इस्तेमाल करता है।
CSS लिखते समय स्टॉप पोज़िशन के हिसाब से क्रमबद्ध होते हैं, इसलिए आप उन्हें किसी भी क्रम में जोड़ सकते हैं। Reverse बटन हर पोज़िशन को उलट देता है (20% पर का स्टॉप 80% पर चला जाता है), रंग दोबारा टाइप किए बिना ग्रेडिएंट पलट देता है।
व्यावहारिक इस्तेमाल
- हीरो सेक्शन और लैंडिंग पेज — हल्का तिरछा ग्रेडिएंट बिना इमेज के गहराई जोड़ता है।
- बटन — हल्का दो-रंग का ग्रेडिएंट आधुनिक लगता है; hover पर उसे थोड़ा गहरा करें।
- कार्ड और ओवरले — फ़ोटो पर पारदर्शी-से-गहरा ग्रेडिएंट सफ़ेद टेक्स्ट को पढ़ने लायक बनाता है।
- ग्रेडिएंट टेक्स्ट — ग्रेडिएंट को background की तरह लगाएँ और उसे टेक्स्ट तक clip करें।
- पाई चार्ट और प्रोग्रेस रिंग — सख्त किनारों वाले conic ग्रेडिएंट इन्हें शुद्ध CSS में बना देते हैं।
- थंबनेल और वॉलपेपर — 1920×1080 पर PNG डाउनलोड करें और किसी भी एडिटर में टेक्स्ट जोड़ें।
इस्तेमाल के लिए तैयार स्निपेट
ग्रेडिएंट टेक्स्ट: background: linear-gradient(90deg, #1B98E0, #7B2FF7); -webkit-background-clip: text; background-clip: text; color: transparent;
फ़ोटो ओवरले: background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%), url(photo.jpg) center / cover; — ग्रेडिएंट पहले लिखा जाता है ताकि वह इमेज के ऊपर रहे।
सरल पाई चार्ट: background: conic-gradient(#1B98E0 0% 40%, #FF9933 40% 75%, #138808 75% 100%); border-radius: 50%; — 40%, 35% और 25% के टुकड़े।
उदाहरण: थंबनेल का बैकग्राउंड
मान लें आपको टेक्नोलॉजी पर YouTube थंबनेल के लिए दमदार बैकग्राउंड चाहिए। Linear चुनें, Ocean प्रीसेट पर क्लिक करें (#1B98E0 से #7B2FF7) और एंगल 135° पर सेट करें ताकि रंग ऊपर-बाएँ कोने से नीचे-दाएँ तक चले। अब CSS बॉक्स में background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%); दिखेगा। इसकी जगह प्रेज़ेंटर के पीछे नरम स्पॉटलाइट चाहिए? Radial पर जाएँ, Circle चुनें और उसे Right पर केंद्रित करें, फिर #FFFFFF का तीसरा स्टॉप 0% पर जोड़ें ताकि चमक तेज़ी से शुरू हो। जब ठीक लगे, 1920×1080 इमेज पाने के लिए Download PNG पर क्लिक करें, जो थंबनेल का 16:9 आकार रखती है; उसे अपने एडिटर में खोलें और ऊपर टेक्स्ट व फ़ोटो जोड़ें। क्योंकि इमेज फ़ोटो से नहीं बल्कि रंगों के गणित से बनती है, कंप्रेस होने पर भी साफ़ रहती है।
कौन सा ग्रेडिएंट प्रकार चुनें?
Linear बैकग्राउंड, बटन और हेडर के लिए सुरक्षित डिफ़ॉल्ट है — यह पढ़ने में आसान है और किसी भी साइज़ पर चलता है। Radial फ़ोकस बनाता है: हल्का केंद्र आँख को ऊपर रखी चीज़ पर खींचता है, जो प्रोफ़ाइल कार्ड, स्पॉटलाइट और विग्नेट इफ़ेक्ट के लिए ठीक है। Conic खास काम के लिए है — कलर व्हील, पाई चार्ट, लोडिंग स्पिनर और स्टारबर्स्ट पैटर्न के लिए बढ़िया, लेकिन पूरे पेज के बैकग्राउंड के रूप में भरा-भरा लग सकता है। अगर पक्का न हो, तो 135° पर linear से शुरू करें, फिर प्रयोग करें।
PNG एक्सपोर्ट के बारे में
PNG ब्राउज़र के canvas ग्रेडिएंट फ़ंक्शन से 1920×1080 पिक्सेल पर बनती है। linear ग्रेडिएंट के लिए टूल CSS की एंगल परंपरा और ग्रेडिएंट-लाइन की लंबाई दोहराता है, इसलिए इमेज प्रीव्यू में दिखने वाली चीज़ से मेल खाती है। radial ग्रेडिएंट के लिए PNG सबसे दूर के कोने तक पहुँचने वाला वृत्त इस्तेमाल करती है, जो CSS का डिफ़ॉल्ट साइज़ है; अगर आपने दीर्घवृत्त चुना है, तब भी PNG वृत्त की तरह बनती है, इसलिए आकार थोड़ा अलग हो सकता है। Conic एक्सपोर्ट के लिए canvas conic सपोर्ट वाला ब्राउज़र चाहिए — मौजूदा Chrome, Edge, Firefox और Safari में यह है।
डिज़ाइन और एक्सेसिबिलिटी के सुझाव
- दोनों सिरों पर कंट्रास्ट जाँचें। टेक्स्ट ग्रेडिएंट के सबसे हल्के और सबसे गहरे हिस्सों पर पढ़ने लायक होना चाहिए। हमारा कलर पैलेट जनरेटर कंट्रास्ट अनुपात दिखाता है।
- बड़े हिस्सों के लिए हल्का रखें। पास-पास की hue (नीले से बैंगनी) विपरीत (लाल से हरे) से ज़्यादा शांत लगती हैं, जो बीच में मटमैला रंग बना सकती हैं।
- धूसर बीच से बचें। अगर दो-रंग का मिश्रण बीच में फीका लगे, तो बीच में ज़्यादा चमकदार स्टॉप जोड़ें।
- ब्रांड कलर इस्तेमाल करें। अपने ब्रांड कलर के दो शेड के बीच का ग्रेडिएंट डिज़ाइन को एक जैसा रखता है।
- डार्क मोड का ख़याल रखें। चमकदार ग्रेडिएंट गहरी थीम पर आँखों को चुभ सकते हैं; गहरा वर्शन सोचें।
ग्रेडिएंट जनरेटर कौन इस्तेमाल करता है?
- फ़्रंट-एंड डेवलपर जो वेबसाइट और ऐप को स्टाइल करते हैं।
- UI/UX डिज़ाइनर जो बैकग्राउंड और बटन का प्रोटोटाइप बनाते हैं।
- YouTuber और Instagram क्रिएटर जो थंबनेल और स्टोरी बैकग्राउंड बनाते हैं।
- ब्लॉगर जो भारी इमेज के बिना रंगीन हेडर जोड़ते हैं।
- स्टूडेंट जो CSS सीख रहे हैं।
- प्रेज़ेंटर जिन्हें साफ़ स्लाइड बैकग्राउंड चाहिए।
इन आम गलतियों से बचें
- background-color इस्तेमाल करना — ग्रेडिएंट इमेज होते हैं, इसलिए
backgroundयाbackground-imageइस्तेमाल करें। - बहुत सारे रंग — तीन-चार से ज़्यादा स्टॉप भरे-भरे लग सकते हैं।
- एलिमेंट की ऊँचाई भूल जाना — बिना ऊँचाई वाले खाली एलिमेंट पर ग्रेडिएंट दिखता नहीं।
- लंबे पेजों पर दोहराव — body पर
min-height: 100vhयाbackground-attachment: fixedजोड़ें ताकि कंटेंट छोटा होने पर ग्रेडिएंट पट्टियों में दोहराने की जगह पूरी स्क्रीन ढके।
समस्या-समाधान
- HEX फ़ील्ड अनदेखा हुआ — # के साथ पूरा छह-अंकों का कोड डालें (जैसे #1B98E0)।
- स्टॉप हटा नहीं सकते — ग्रेडिएंट के लिए कम से कम दो स्टॉप चाहिए।
- बड़े ग्रेडिएंट में बैंडिंग — कुछ स्क्रीन पर बहुत मिलते-जुलते रंगों के साथ हल्की धारियाँ दिख सकती हैं; रंगों का फ़र्क थोड़ा बढ़ाएँ।
संक्षिप्त शब्दावली
- ग्रेडिएंट: रंगों के बीच स्मूद बदलाव।
- कलर स्टॉप: ग्रेडिएंट में एक रंग और उसकी पोज़िशन।
- Linear: सीधी रेखा के साथ मिश्रण।
- Radial: केंद्र से बाहर की ओर मिश्रण।
- Conic: केंद्र बिंदु के चारों ओर मिश्रण।
- फ़ॉलबैक: ठोस रंग जो ग्रेडिएंट न लगने पर इस्तेमाल होता है।
यह CSS ग्रेडिएंट जनरेटर क्यों इस्तेमाल करें?
यह हर CSS ग्रेडिएंट प्रकार को सटीक कंट्रोल, लाइव प्रीव्यू, साफ़ कोड और इमेज एक्सपोर्ट के साथ कवर करता है — मुफ़्त, तेज़ और निजी।
CSS ग्रेडिएंट जनरेटर — मुख्य तथ्य
| प्रकार | linear-gradient, radial-gradient, conic-gradient |
|---|---|
| कलर स्टॉप | 2 से 8, हर एक की 0–100% पोज़िशन |
| एंगल | 0° ऊपर, 90° दाईं ओर, 180° नीचे (CSS परंपरा) |
| आउटपुट | ठोस रंग वाली फ़ॉलबैक लाइन के साथ CSS |
| इमेज एक्सपोर्ट | 1920×1080 पर PNG |
| ब्राउज़र सपोर्ट | सभी आधुनिक ब्राउज़र तीनों प्रकार सपोर्ट करते हैं |
अक्सर पूछे जाने वाले सवाल
CSS में ग्रेडिएंट बैकग्राउंड कैसे बनाऊँ?
ग्रेडिएंट फ़ंक्शन के साथ background प्रॉपर्टी इस्तेमाल करें, जैसे background: linear-gradient(135deg, #1B98E0, #7B2FF7);। यह टूल लाइव प्रीव्यू के साथ आपके लिए ठीक वही कोड बनाता है, इसलिए आपको बस कॉपी करके पेस्ट करना है।
linear, radial और conic ग्रेडिएंट में क्या फ़र्क है?
Linear ग्रेडिएंट एक कोण पर सीधी रेखा के साथ रंग बदलता है। Radial ग्रेडिएंट किसी केंद्र बिंदु से बाहर की ओर गोल या अंडाकार फैलता है। Conic ग्रेडिएंट घड़ी की सुइयों की तरह केंद्र बिंदु के चारों ओर रंग घुमाता है, जो पाई चार्ट और कलर व्हील के लिए काम का है।
CSS linear ग्रेडिएंट में 0deg कौन सी दिशा है?
0deg ऊपर की ओर इशारा करता है, 90deg दाईं ओर, 180deg नीचे की ओर और 270deg बाईं ओर। इसलिए linear-gradient(90deg, red, blue) बाईं ओर लाल से शुरू होकर दाईं ओर नीले पर खत्म होता है।
कलर स्टॉप क्या होते हैं?
कलर स्टॉप ग्रेडिएंट के रंग हैं और यह कि हर एक उसमें कहाँ बैठता है, जो प्रतिशत में लिखा जाता है। #FF9933 0%, #FFFFFF 50%, #138808 100% सफ़ेद को ठीक बीच में रखता है।
स्मूद मिश्रण की जगह सख्त रेखा कैसे बनाऊँ?
दो पास-पास के स्टॉप को एक ही पोज़िशन दें। उदाहरण के लिए, red 50% के बाद blue 50% लाल और नीले के बीच बिना मिश्रण के तीखा किनारा बनाता है।
CSS में फ़ॉलबैक लाइन क्यों होती है?
पहली लाइन एक ठोस बैकग्राउंड रंग सेट करती है। हर आधुनिक ब्राउज़र ग्रेडिएंट सपोर्ट करता है, लेकिन अगर ग्रेडिएंट लोड न हो या ओवरराइड हो जाए तो फ़ॉलबैक टेक्स्ट को पढ़ने लायक रखता है। इसे रखना नुकसानदेह नहीं है।
क्या मैं ग्रेडिएंट को वॉलपेपर या थंबनेल बैकग्राउंड की तरह इस्तेमाल कर सकता हूँ?
हाँ। ग्रेडिएंट की 1920×1080 इमेज सेव करने के लिए Download PNG पर क्लिक करें, जो डेस्कटॉप वॉलपेपर, YouTube थंबनेल और प्रेज़ेंटेशन स्लाइड के लिए ठीक है।
क्या मुझे -webkit- प्रीफ़िक्स चाहिए?
नहीं। बिना प्रीफ़िक्स वाले linear, radial और conic ग्रेडिएंट Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्शन में चलते हैं।
टेक्स्ट पर ग्रेडिएंट कैसे लगाऊँ?
ग्रेडिएंट को टेक्स्ट एलिमेंट के background के रूप में लगाएँ, फिर background-clip: text और color: transparent जोड़ें (ज़्यादा सपोर्ट के लिए -webkit-background-clip: text रखें)।
मैं कितने कलर स्टॉप जोड़ सकता हूँ?
यह टूल 2 से 8 स्टॉप सपोर्ट करता है। दो या तीन आमतौर पर सबसे अच्छे लगते हैं; इंद्रधनुष और बहुरंगी इफ़ेक्ट के लिए ज़्यादा स्टॉप काम आते हैं।
क्या ग्रेडिएंट मेरी वेबसाइट को धीमा करेंगे?
नहीं। CSS ग्रेडिएंट ब्राउज़र खुद बनाता है और इमेज डाउनलोड नहीं चाहिए, इसलिए ये आमतौर पर बैकग्राउंड इमेज से हल्के होते हैं।
क्या CSS ग्रेडिएंट जनरेटर मुफ़्त है?
हाँ। यह मुफ़्त है, असीमित है, साइन-अप की ज़रूरत नहीं और पूरी तरह आपके ब्राउज़र में चलता है।
सेकंडों में सुंदर बैकग्राउंड!
Linear, radial और conic ग्रेडिएंट — साफ़ CSS मुफ़्त में कॉपी करें।
Prompt Minds के और टूल्स देखें
CSS ग्रेडिएंट जनरेटर हमारे दूसरे मुफ़्त टूल्स के साथ भी बढ़िया काम करता है। Prompt Minds का हर टूल पूरी तरह आपके ब्राउज़र में चलता है — साइन-अप की ज़रूरत नहीं, कोई अपलोड नहीं, कोई वॉटरमार्क नहीं। सभी मुफ़्त टूल्स देखें।