CSS ग्रेडिएंट जनरेटर
लीनियर, रेडियल या कॉनिक CSS ग्रेडिएंट को दृश्य रूप से डिज़ाइन करें। 6 तक कलर स्टॉप जोड़ें,
कोण और स्थितियाँ समायोजित करें, फिर तैयार CSS — जिसमें -webkit- प्रीफ़िक्स वाला
संस्करण भी शामिल है — कॉपी करें। यह पूरी तरह आपके ब्राउज़र में चलता है।
इस ग्रेडिएंट जनरेटर का उपयोग कैसे करें
- एक प्रकार चुनें — लीनियर सीधी रेखा में फ़ेड होता है; रेडियल किसी केंद्र-बिंदु से बाहर की ओर फैलता है; कॉनिक किसी कोण के चारों ओर पाई-चार्ट की तरह घूमता है।
- कोण या स्थिति सेट करें — लीनियर ग्रेडिएंट के लिए कोण स्लाइडर खींचें। रेडियल और कॉनिक के लिए ड्रॉपडाउन से मूल-बिंदु चुनें।
- कलर स्टॉप संपादित करें — अपने ब्राउज़र का कलर पिकर खोलने के लिए कलर स्वैच पर क्लिक करें, फिर स्टॉप को 0% से 100% के बीच कहीं भी रखने के लिए स्थिति स्लाइडर खींचें। और जोड़ने के लिए + स्टॉप जोड़ें पर क्लिक करें (6 तक), या किसी को हटाने के लिए × पर क्लिक करें।
- कोई प्रीसेट इस्तेमाल करें — किसी चुने हुए ग्रेडिएंट को तुरंत लोड करने के लिए किसी भी नामित प्रीसेट पर क्लिक करें। फिर आप उसे और समायोजित कर सकते हैं।
- CSS कॉपी करें — आउटपुट बॉक्स के बगल में कॉपी करें पर क्लिक करें, फिर इसे अपनी स्टाइलशीट में पेस्ट करें।
CSS ग्रेडिएंट सिंटैक्स संदर्भ
| फ़ंक्शन | सिंटैक्स | टिप्पणियाँ |
|---|---|---|
linear-gradient() | linear-gradient(angle, color stop, …) | कोण: 0deg = ऊपर, 90deg = दाएँ, 180deg = नीचे। to right, to bottom left जैसे कीवर्ड इस्तेमाल करें। |
radial-gradient() | radial-gradient(shape size at pos, color stop, …) | आकार: circle या ellipse। साइज़ कीवर्ड: closest-side, farthest-corner (डिफ़ॉल्ट)। |
conic-gradient() | conic-gradient(from angle at pos, color stop, …) | स्टॉप लंबाई नहीं, कोणों पर रखे जाते हैं। पाई-चार्ट और कलर व्हील के लिए उपयोगी। |
repeating-linear-gradient() | लीनियर जैसा ही | स्टॉप पैटर्न को दोहराकर पूरा बैकग्राउंड भरता है — धारियों के लिए बढ़िया। |
| हिंट वाला कलर स्टॉप | red 20%, 40%, blue 60% | मध्य-बिंदु हिंट (बिना रंग का प्रतिशत) यह खिसकाता है कि ट्रांज़िशन का मध्य-बिंदु कहाँ पड़े। |
| पारदर्शी स्टॉप | rgba(255,0,0,0) या #ff000000 | उन स्टॉप के लिए rgba या 8-अंकीय हेक्स इस्तेमाल करें जो कुछ भी न में फ़ेड होते हैं। |
CSS ग्रेडिएंट के आम उपयोग
- हीरो बैकग्राउंड — कोई लीनियर या रेडियल ग्रेडिएंट किसी भारी इमेज फ़ाइल की जगह लेता है और तुरंत लोड होता है।
- बटन हॉवर स्टेट — पॉलिश्ड अनुभव के लिए हॉवर पर किसी ग्रेडिएंट ओवरले को एनिमेट करें (::before स्यूडो-एलिमेंट पर opacity ट्रांज़िशन इस्तेमाल करें)।
- टेक्स्ट इफ़ेक्ट —
background-clip: textऔरcolor: transparentके साथ टेक्स्ट पर ग्रेडिएंट लगाएँ। - इमेज पर ओवरले — टेक्स्ट की पठनीयता सुधारने के लिए किसी इमेज के ऊपर एक अर्ध-पारदर्शी लीनियर ग्रेडिएंट स्टैक करें।
- प्रोग्रेस बार और पाई चार्ट — पूर्णता प्रतिशत दिखाने के लिए कॉनिक ग्रेडिएंट बिल्कुल सही हैं।
- सजावटी डिवाइडर — दोनों सिरों पर पारदर्शी में फ़ेड होने वाले ग्रेडिएंट वाला एक पतला एलिमेंट एक सुरुचिपूर्ण सेक्शन विभाजक बनाता है।
CSS ग्रेडिएंट का संक्षिप्त इतिहास
ग्रेडिएंट अब CSS का सहज हिस्सा लगते हैं, पर वर्षों तक इन्हें पाने का एकमात्र तरीका एक बैकग्राउंड
इमेज थी — Photoshop से मेहनत से निर्यात की गई कोई PNG या JPEG, जो एक HTTP अनुरोध जोड़ती,
हाई-रेज़ोल्यूशन स्क्रीन पर धुंधली हो जाती, और बिना दोबारा निर्यात किए आकार नहीं बदली जा सकती
थी। WebKit ने 2008 में एक स्वामित्व वाले -webkit-gradient() फ़ंक्शन (Safari 4 में)
के साथ यह तोड़ा, और Firefox ने जल्द ही अपने -moz-linear-gradient() के साथ इसका
अनुसरण किया। कुछ समय तक हर ग्रेडिएंट को तीन-चार बार लिखना पड़ता था — प्रति इंजन एक बार — जो पुराने
ट्यूटोरियल में भरे “प्रीफ़िक्स सूप” की जड़ है।
W3C ने आधुनिक सिंटैक्स को CSS Images Module Level 3 में मानकीकृत किया, और लगभग
2012–2013 तक linear-gradient() और radial-gradient() हर प्रमुख ब्राउज़र
में बिना प्रीफ़िक्स के काम करने लगे। मानक ने रास्ते में कोण का अर्थ तक बदल दिया: आज के सिंटैक्स में
0deg ऊपर की ओर इशारा करता है और 90deg दाएँ, जबकि शुरुआती प्रीफ़िक्स्ड
संस्करण एक अलग परिपाटी इस्तेमाल करते थे — यही वजह है कि कॉपी-पेस्ट किए पुराने ग्रेडिएंट कभी-कभी
“ग़लत” दिशा में इशारा करते हैं। CSS Images Module Level 4 ने बाद में
conic-gradient() (किसी बिंदु के चारों ओर घूमने वाला प्रकार, 2018 में Chrome 69 में
आया) और नीचे बताए गए रंग-प्रक्षेप नियंत्रण जोड़े। सार यह: यह जनरेटर जो -webkit-
प्रीफ़िक्स अब भी उत्सर्जित करता है, वह अब बहुत पुराने ब्राउज़रों के लिए अतिरिक्त एहतियात भर है, कोई
अनिवार्यता नहीं।
ग्रेडिएंट रंग-प्रक्षेप (इंटरपोलेशन) कैसे काम करता है (और OKLCH अपग्रेड)
कोई ग्रेडिएंट दरअसल ब्राउज़र का आपके स्टॉप से सभी बीच के रंगों की गणना करना है, और वह कैसे गणना करता है, इससे बहुत फ़र्क पड़ता है। डिफ़ॉल्ट रूप से, CSS sRGB कलर स्पेस में मिश्रण करता है — लाल, हरे और नीले चैनलों का सीधा संख्यात्मक मिश्रण। यह उचित लगता है पर एक कुख्यात समस्या पैदा करता है: दो चटख पूरक रंगों (मान लें नीले से पीले) के बीच का ग्रेडिएंट बीच में एक मटमैले, फीके धूसर से गुज़रता है, क्योंकि दो विपरीत RGB मानों का मध्य-बिंदु धूसर के पास पड़ता है। डिज़ाइनर इसे “ग्रे डेड ज़ोन” कहते हैं, और यही कारण है कि हाथ से चुने गए ग्रेडिएंट को अच्छा दिखने के लिए अक्सर एक अतिरिक्त बीच का स्टॉप चाहिए होता है।
CSS Color 4 और Images Level 4 इसे स्रोत पर ही ठीक करते हैं, आपको प्रक्षेप स्पेस चुनने देकर, जैसे
linear-gradient(in oklch, blue, yellow)। OKLCH या OKLab जैसे प्रत्यक्षगत
रूप से एकसमान स्पेस में मिश्रण करना ट्रांज़िशन को चटख और सम बनाए रखता है — रंग धूसर में
से सीधे जाने के बजाय कलर व्हील के चारों ओर यात्रा करते हैं। ध्रुवीय स्पेस के लिए आप ह्यू-प्रक्षेप
कीवर्ड (shorter hue, longer hue) से रास्ता तक चुन सकते हैं, व्हील के
चारों ओर छोटा या लंबा रास्ता तय करते हुए। यह प्रक्षेप सिंटैक्स Chrome 111, Firefox 113
और Safari 16.2 (सभी 2023) में आया, इसलिए इसे इस्तेमाल करना उत्तरोत्तर सुरक्षित है। ऊपर
दिए रंग इंटरपोलेशन नियंत्रण में स्पेस चुनें और यह जनरेटर उसे सीधे कॉपी की गई CSS
में लिख देता है — क्लासिक, अधिकतम-संगत रूप के लिए इसे sRGB (डिफ़ॉल्ट) पर रहने दें।
-webkit- बॉक्स अपनी पहली पंक्ति पर इंटरपोलेशन विधि जान-बूझकर नहीं रखता:
जो इंजन इतना पुराना है कि उसे वह प्रीफ़िक्स चाहिए, वह in <space> सिंटैक्स से
पहले का है और उसे पार्स ही नहीं कर पाएगा — इसलिए वह पंक्ति सादा sRGB फ़ॉलबैक बनी रहती है और
आधुनिक घोषणा उसके बाद आती है।
ग्रेडिएंट रेखा, बॉक्स और “मैजिक कॉर्नर”
ज्यामिति को समझना ग्रेडिएंट को अनुमान-आधारित के बजाय पूर्वानुमेय बना देता है। हर लीनियर ग्रेडिएंट की एक ग्रेडिएंट रेखा होती है — एक अक्ष जो आपके तय किए कोण पर एलिमेंट के आर-पार चलती है — और आपके कलर स्टॉप उस रेखा के अनुदिश स्थितियाँ हैं, जो उस पर लंबवत प्रक्षेपित होती हैं। 50% पर रखा स्टॉप रेखा के आधे रास्ते बैठता है; ग्रेडिएंट रेखा पर लंबवत किसी रेखा पर हर चीज़ को एक ही रंग मिलता है।
- कोण बनाम कीवर्ड।
0deg“ऊपर की ओर” है,90deg“दाएँ की ओर”, और इसी तरह घड़ी की दिशा में; कीवर्ड रूप (to right,to bottom left) आम मामलों के लिए बस अधिक अपनापन देने वाले नाम हैं। - “मैजिक कॉर्नर”। जब आप किसी ग़ैर-वर्गाकार बॉक्स के कोने की ओर ग्रेडिएंट लक्षित
करते हैं (जैसे
to bottom right), तो CSS कुछ चतुर करता है: जिस कोने की ओर आप इशारा करते हैं और उसका विपरीत कोना, दोनों ग्रेडिएंट रेखा पर लंबवत एक रेखा पर बैठते हैं, इसलिए बॉक्स के आकार की परवाह किए बिना ग्रेडिएंट हमेशा ठीक कोनों में समाप्त होता है। यही कारण है कि कोई कोना-ग्रेडिएंट “सही” दिखता है, चाहे एलिमेंट कोई ऊँचा साइडबार हो या चौड़ा बैनर। - रेडियल साइज़ कीवर्ड। किसी रेडियल ग्रेडिएंट की पहुँच
closest-sideऔरfarthest-corner(डिफ़ॉल्ट) जैसे कीवर्ड से नियंत्रित होती है, जो तय करते हैं कि आख़िरी कलर स्टॉप एलिमेंट के किनारों और कोनों के सापेक्ष कहाँ पड़े। - हार्ड स्टॉप और दोहराव। दो स्टॉप को एक ही स्थिति पर रखना बिना मिश्रण के एक
कुरकुरा किनारा बनाता है, और
repeating-linear-gradient()धारियाँ बनाने के लिए स्टॉप पैटर्न को टाइल करता है — दोनों शुद्ध-CSS पैटर्न हैं जिन्हें किसी इमेज की ज़रूरत नहीं।
बैंडिंग, और ग्रेडिएंट को मुलायम कैसे रखें
बड़े, सूक्ष्म ग्रेडिएंट पर — किसी लगभग-काले हीरो पर जो थोड़ा-कम-काले में फ़ेड होता है — आप एक निर्बाध मिश्रण के बजाय हल्की बैंड देख सकते हैं। यह कोई CSS बग नहीं है; यह प्रति-चैनल 8-बिट रंग की सीमा है। किसी चौड़े क्षेत्र में दो सिरों के बीच बस पर्याप्त भिन्न मान नहीं होते, इसलिए डिस्प्ले उनके बीच दृश्यमान चरणों में क़दम रखता है, ख़ासकर गहरे रंगों में जहाँ आँख छोटे बदलावों के प्रति सबसे संवेदनशील है। तीन व्यावहारिक उपाय मदद करते हैं: वही रंग किसी छोटी दूरी पर फैलाएँ (छोटे एलिमेंट कम बैंड करते हैं); बीच के स्टॉप जोड़ें ताकि हर खंड कम दायरा घेरे; या एक बहुत सूक्ष्म पारदर्शी नॉइज़ टेक्सचर ओवरले करें, जो बैंड किनारों को डिदर कर देता है ताकि आँख उन्हें मिला दे — यह तरकीब कई पॉलिश्ड हीरो सेक्शन में इस्तेमाल होती है। OKLab में प्रक्षेप भी बैंडिंग घटा सकता है क्योंकि चरण संख्यात्मक के बजाय प्रत्यक्षगत रूप से अंतराल पर रखे जाते हैं।
ग्रेडिएंट पर टेक्स्ट रखना: एक सुलभता टिप्पणी
कोई ग्रेडिएंट बैकग्राउंड एक कंट्रास्ट बारूदी सुरंग है, क्योंकि बैकग्राउंड का रंग एलिमेंट के आर-पार बदलता है जबकि टेक्स्ट का रंग स्थिर रहता है। किसी शीर्षक में वहाँ भरपूर कंट्रास्ट हो सकता है जहाँ ग्रेडिएंट गहरा है और वहाँ बहुत कम जहाँ वह हल्का होता है — और सुलभता का आकलन सबसे बुरे बिंदु से होता है, औसत से नहीं। किसी ग्रेडिएंट पर टेक्स्ट भेजने से पहले, टेक्स्ट के रंग की जाँच उस सबसे हल्के बैकग्राउंड रंग के मुक़ाबले करें जिस पर टेक्स्ट बैठता है और बॉडी टेक्स्ट के लिए कम से कम WCAG 4.5:1 अनुपात का लक्ष्य रखें (बड़े टेक्स्ट के लिए 3:1)। जब कोई ग्रेडिएंट टेक्स्ट को पूरे भर में पठनीय रखने के लिए बहुत चौड़ी लाइटनेस रेंज घेरता है, तो सामान्य उपाय है ग्रेडिएंट और टेक्स्ट के बीच एक अर्ध-पारदर्शी ठोस ओवरले, या एक सूक्ष्म टेक्स्ट शैडो, ताकि सबसे बुरा मामला समतल हो जाए। हमारा WCAG कंट्रास्ट चेकर परिणाम सत्यापित करने के लिए साथी टूल है।
अक्सर पूछे जाने वाले सवाल
कौन-से ब्राउज़र CSS ग्रेडिएंट सपोर्ट करते हैं?
सभी आधुनिक ब्राउज़र — Chrome, Firefox, Safari, Edge और Opera — 2013 से बिना किसी वेंडर प्रीफ़िक्स के linear-gradient और radial-gradient सपोर्ट करते हैं। मौजूदा ब्राउज़रों में इन दो प्रकारों के लिए -webkit- प्रीफ़िक्स की अब ज़रूरत नहीं है, हालाँकि इसे शामिल करने से कोई नुक़सान भी नहीं होता। conic-gradient का सपोर्ट थोड़ा नया है (Chrome 69+, Safari 12.1+, Firefox 83+) पर 2024 तक भी यह 95% से कहीं अधिक उपयोगकर्ताओं को कवर करता है। आप बिना किसी पॉलीफ़िल के तीनों प्रकार प्रोडक्शन में सुरक्षित रूप से इस्तेमाल कर सकते हैं।
क्या CSS ग्रेडिएंट पेज की परफ़ॉर्मेंस पर असर डालते हैं?
CSS ग्रेडिएंट GPU द्वारा रेंडर होते हैं और बेहद तेज़ हैं — किसी ग्रेडिएंट इमेज फ़ाइल को लोड करने से कहीं तेज़। ये कोई HTTP अनुरोध नहीं जोड़ते, किसी भी रेज़ोल्यूशन (Retina/HiDPI स्क्रीन सहित) पर पूरी तरह स्केल होते हैं, और लेआउट की दोबारा गणना कराए बिना CSS ट्रांज़िशन या कीफ़्रेम के ज़रिए एनिमेट किए जा सकते हैं (ये केवल कंपोज़िटिंग ट्रिगर करते हैं)। सजावटी इमेज की तुलना में बैकग्राउंड के रूप में ग्रेडिएंट इस्तेमाल करना अनुशंसित परफ़ॉर्मेंस बेस्ट-प्रैक्टिस में से एक है।
मैं टेक्स्ट पर ग्रेडिएंट कैसे लगाऊँ?
टेक्स्ट पर ग्रेडिएंट लगाने के लिए आपको तीन CSS प्रॉपर्टी चाहिए: background को अपने ग्रेडिएंट पर सेट करें, -webkit-background-clip: text सेट करें (गैर-WebKit ब्राउज़रों के लिए background-clip: text भी), और color (या -webkit-text-fill-color) को transparent सेट करें। उदाहरण के लिए: .gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }। ध्यान दें कि background-clip: text सभी ब्राउज़रों में अब तक -webkit- प्रीफ़िक्स के बिना सपोर्ट नहीं है, इसलिए दोनों शामिल करें।
क्या मैं एक ही एलिमेंट पर कई ग्रेडिएंट लेयर कर सकता हूँ?
हाँ। CSS आपको एक एलिमेंट पर कई बैकग्राउंड, ग्रेडिएंट सहित, कॉमा से अलग करके स्टैक करने देता है। पहला मान सबसे ऊपर होता है। उदाहरण के लिए: background: radial-gradient(circle at 20% 50%, rgba(255,107,107,0.4) 0%, transparent 50%), linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); — यह एक गहरे लीनियर ग्रेडिएंट के ऊपर एक मुलायम लाल रेडियल चमक बिछा देता है। हर लेयर एक अलग प्रकार की हो सकती है और उसके अपने आकार, स्थिति और स्टॉप हो सकते हैं।
मैं दो स्टॉप के बीच बिना फ़ेड के तीखा रंग-परिवर्तन (शार्प ट्रांज़िशन) कैसे बनाऊँ?
किसी मुलायम मिश्रण के बजाय दो रंगों के बीच एक कठोर, अचानक किनारा बनाने के लिए, दो कलर स्टॉप को एक ही स्थिति पर रखें (या एक को ठीक दूसरे के बाद)। उदाहरण के लिए: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%) 50% पर बिना किसी ट्रांज़िशन के एक तीखा विभाजन बनाता है। आप इस तरकीब से धारियाँ और शतरंज-जैसे पैटर्न बना सकते हैं। इस जनरेटर में, यह असर पाने के लिए दो स्टॉप को एक ही स्थिति-मान पर खींचें।
क्या CSS ग्रेडिएंट को एनिमेट किया जा सकता है?
CSS ग्रेडिएंट स्वयं सीधे ट्रांज़िशन नहीं किए जा सकते क्योंकि background-image कोई एनिमेट होने योग्य प्रॉपर्टी नहीं है। हालाँकि दो व्यावहारिक उपाय हैं: (1) किसी स्यूडो-एलिमेंट (::before या ::after) की opacity को एनिमेट करें जो एलिमेंट के ऊपर नया ग्रेडिएंट रखता है — इससे दो ग्रेडिएंट के बीच मुलायम फ़ेड होता है। (2) कलर स्टॉप के लिए CSS कस्टम प्रॉपर्टी (वेरिएबल) इस्तेमाल करें और उन्हें @property (Houdini) के साथ एनिमेट करें, जो Chrome और Edge में प्रथम-श्रेणी का एनिमेटेड ग्रेडिएंट सपोर्ट देता है।