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

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

CSS ग्रेडिएंट दो या अधिक रंगों के बीच चिकने संक्रमण प्रदर्शित करने देते हैं, छवियों का उपयोग किए बिना। वे ब्राउज़र द्वारा जनरेट होते हैं।

CSS gradients का संक्षिप्त इतिहास

CSS gradients CSS Image Values and Replaced Content Module Level 3 में परिभाषित हैं, W3C CSS Working Group द्वारा अनुरक्षित और Tab Atkins Jr. व Elika J. Etemad सहित अन्य द्वारा संपादित। First Public Working Draft 12 जुलाई 2011 को आया; spec ने 17 अप्रैल 2012 को Candidate Recommendation स्थिति पाई, बिना-प्रीफ़िक्स आधुनिक syntax को लॉक करते हुए, जिसमें यह नियम भी शामिल है कि 0deg ऊपर की ओर (शीर्ष की ओर) इंगित करता है और to right 90deg के बराबर है। ब्राउज़र शिपिंग क्रम: WebKit बहुत पहले पहले था, Safari 4 (2009) में -webkit-gradient() उपयोग योग्य था, एक फ़ंक्शन-कॉल-भारी syntax में। Firefox ने Firefox 3.6, 21 जनवरी 2010 में -moz-linear-gradient() भेजा; Internet Explorer 10 ने 2012 में बिना-प्रीफ़िक्स रूप भेजे; बिना-प्रीफ़िक्स syntax 2013 के अंत तक सभी प्रमुख इंजनों में स्थिर हो गया। conic-gradient() बाद में CSS Images Level 4 में निर्दिष्ट हुआ, Lea Verou ने 2011 में प्रस्ताव का मसौदा तैयार किया, Tab Atkins ने 2012 में इसे spec में जोड़ा, और देशी शिपिंग Chrome 69 (4 सितंबर 2018), Safari 12.1 (25 मार्च 2019) और Firefox 83 (17 नवंबर 2020) में आई। 2026 में आप background: linear-gradient(...) और background: radial-gradient(...) को बिना प्रीफ़िक्स और बिना fallbacks के, किसी भी समर्थन के योग्य ब्राउज़र के लिए, आत्मविश्वास से लिख सकते हैं।

linear-gradient: कोण, भुजाएँ, और तिरछी सूक्ष्मता

औपचारिक व्याकरण है linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...)। कोण का सम्मेलन डेवलपरों को अक्सर लड़खड़ाता है क्योंकि यह SVG/canvas के सम्मेलन से अलग है। 0deg to top के बराबर है, gradient line ऊपर की ओर इंगित करती है, इसलिए अंतिम रंग शीर्ष पर दिखाई देता है। 90deg to right के बराबर है। 180deg to bottom के बराबर है (कोई दिशा न दी जाए तो डिफ़ॉल्ट)। 270deg to left के बराबर है। 135deg विहित तिरछा है, ऊपर-बाएँ से नीचे-दाएँ, आधुनिक वेब डिज़ाइन में सबसे आम gradient दिशा। बढ़ते कोण ऊपर से घड़ी की दिशा में घूमते हैं, गणितीय सम्मेलन (जहाँ 0 दाएँ है और कोण घड़ी-विपरीत बढ़ते हैं) के विपरीत और SVG के <linearGradient> के विपरीत। एक उपयोगी सूक्ष्मता: to right और 90deg केवल चौकोर बक्सों पर समान हैं। एक गैर-चौकोर बक्से पर, to top right ठीक नीचे-बाएँ कोने से तिरछे के लंबवत एक gradient line पैदा करता है, मतलब gradient कोने को साफ़ तरीक़े से छूता है, जबकि 45deg हमेशा सचमुच 45 डिग्री है, चाहे aspect ratio कुछ भी हो। अधिकांश hero पृष्ठभूमि के लिए यह भेद मायने नहीं रखता; सटीक रूप से संरेखित डिज़ाइनों के लिए रख सकता है।

radial-gradient: आकार, आकार और स्थिति

व्याकरण है radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...)। दो आकार मान: circle (बक्से के अनुसार स्केल किया गया पूर्ण वृत्त) और ellipse (डिफ़ॉल्ट, बक्से के aspect ratio तक खींचा गया)। आकार चार extent कीवर्ड में से एक या स्पष्ट लंबाई/प्रतिशत हो सकता है। closest-side: समाप्त आकार निकटतम भुजा को छूता है। closest-corner: समाप्त आकार ठीक निकटतम कोने से होकर गुज़रता है। farthest-side: समाप्त आकार सबसे दूर भुजा को छूता है। farthest-corner (डिफ़ॉल्ट): समाप्त आकार सबसे दूर कोने से होकर गुज़रता है। at <position> उपवाक्य केंद्र को हिलाता है, at top left, at 30% 70% आदि। डिफ़ॉल्ट केंद्र at center center है। radial gradients से आप spotlight प्रभाव, नरम चमक, «vignette» पृष्ठभूमि जहाँ किनारे काले की ओर गहरे होते हैं, और गोल बैज पृष्ठभूमियाँ बनाते हैं। 2026 के production उपयोग में ये linear gradients से ख़ासी कम सामान्य हैं, landing pages पर आप जो «gradient» पृष्ठभूमियाँ देखते हैं उनमें से अधिकांश linear हैं, पर जहाँ linear नहीं पहुँच सकता, वहाँ ये अपरिहार्य हैं।

Color stops, gradient का हृदय

एक color stop एक रंग मान है जिसकी वैकल्पिक स्थिति gradient line के साथ होती है। linear-gradient(red, blue) लाल को 0% पर और नीले को 100% पर रखता है, बीच में एक चिकनी interpolation के साथ। linear-gradient(red 0%, yellow 50%, blue 100%) बीच में एक पीला stop जोड़ता है। स्पष्ट स्थितियों वाले stops 0% से 100% तक कहीं भी रखे जा सकते हैं, और बिना स्पष्ट स्थिति वाले stops अपने स्पष्ट-स्थिति पड़ोसियों के बीच समान रूप से वितरित होते हैं। हार्ड color stops, एक ही स्थिति पर दो stops, जैसे linear-gradient(red 50%, blue 50%), चिकने मिश्रण के बजाय तत्काल संक्रमण पैदा करते हैं। यह हर CSS pattern के पीछे की चाल है: धारियाँ, चेकरबोर्ड, बिंदु, सभी हार्ड stops वाले gradient stacks से बने हैं। Color interpolation hints (CSS Images Level 4): दो stops के बीच एक नंगा प्रतिशत डालना interpolation का मध्यबिंदु कहाँ गिरता है, इसे विकृत करता है। linear-gradient(red, 25%, blue) डिफ़ॉल्ट 50% के बजाय कथित मध्यबिंदु को 25% पर स्थानांतरित करता है, एक रंग को दूसरे पर सूक्ष्म रूप से तौलने के लिए उपयोगी। आधुनिक रंग-स्थान interpolation (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) gamma-encoded sRGB के बजाय अनुभवात्मक रूप से समान Oklab रंग स्थान में interpolate करता है, बीच से होकर अधिक चिकने संक्रमण पैदा करते हुए, बिना उस मटमैले धूसर «मृत क्षेत्र» के जो उच्च-chroma पूरक रंगों के बीच sRGB interpolation पैदा करता है। डिफ़ॉल्ट अभी भी in oklab (या पुराने ब्राउज़रों में in srgb) है, हाथ से बने gradients के लिए आप opt-in कर सकते हैं।

आधुनिक रंग-स्थान, क्यों oklch gradients बेहतर दिखते हैं

दो दशकों से, हर CSS gradient ने रंग मानों को sRGB में interpolate किया, उस gamma-encoded रंग-स्थान में जिसके साथ वेब बड़ा हुआ। sRGB interpolation में एक प्रसिद्ध विफलता मोड है: उच्च-chroma पूरक रंगों (लाल ↔ हरा, नीला ↔ पीला, मैजेंटा ↔ सियान) के बीच gradients एक मटमैले धूसर मध्यबिंदु से गुज़रते हैं। sRGB में linear-gradient(red, green) आज़माइए और बीच भूरा है, वह चमकदार जैतून नहीं जिसकी आपकी आँखें अपेक्षा करती हैं। Oklab (Björn Ottosson, दिसंबर 2020) एक अनुभवात्मक रूप से समान रंग-स्थान है जो विशेष रूप से इसे ठीक करने के लिए डिज़ाइन किया गया है। OKLCH Oklab का बेलनाकार रूप है, तीन निर्देशांक हैं Lightness (0-100%), Chroma (0+), और Hue (0-360°)। OKLCH में gradients पूरे संक्रमण के दौरान अनुभवात्मक रूप से चिकने रहते हैं, उज्ज्वलता एकसमान रूप से बढ़ती है और hue रंग चक्र के माध्यम से पूर्वानुमेय रूप से घूमता है। CSS Color Module 4 spec ने gradient functions के पैरामीटर के रूप में <color-interpolation-method> जोड़ा: linear-gradient(in oklch, red, blue)। ब्राउज़र समर्थन 2023 के मध्य-अंत में baseline पहुँच गया (Safari 16.4 मार्च 2023, Chrome 111 मार्च 2023, Firefox 113 मई 2023)। production design systems में उपयोग किए जाने वाले gradients के लिए, OKLCH विकल्प तेज़ी से सही विकल्प बनता जा रहा है; यह जनरेटर वर्तमान में sRGB-डिफ़ॉल्ट gradients उत्सर्जित करता है और OKLCH toggle roadmap पर है।

प्रदर्शन, gradients सस्ते हैं, पर मुफ़्त नहीं

CSS gradients हर आधुनिक ब्राउज़र पर GPU-त्वरित हैं, जो उन्हें अधिकांश उपयोग मामलों के लिए टाइल बिटमैप छवियों से नाटकीय रूप से तेज़ बनाता है, कोई HTTP अनुरोध नहीं, कोई डिकोड नहीं, vector-resolution-स्वतंत्र, CSS variables के माध्यम से तुरंत रंग बदलने योग्य। जानने योग्य व्यापार: paint लागत स्पर्श किए गए pixels और gradient जटिलता के साथ बढ़ती है; gradients उन सबसे महंगी चीज़ों में से हैं जिन्हें ब्राउज़र पेंट कर सकता है, और एक पूर्ण-viewport hero पर कई gradient परतें ढेर करना निचले-स्तरीय GPUs पर frames खर्च कर सकता है। gradient रंगों को animate करना हर frame पर पूर्ण repaint ट्रिगर करता है, transform या opacity को animate करने से कहीं अधिक महंगा। आधुनिक fix है @property पंजीकृत custom properties (Houdini Properties and Values API) का उपयोग करना, जो ब्राउज़र को मुख्य thread के बजाय compositor thread पर रंग मानों को interpolate करने देता है; Chrome 78+ (नवंबर 2019), Safari 16.4+ (मार्च 2023), Firefox 128+ (जुलाई 2024) में समर्थित। सस्ता पारंपरिक विकल्प है एक fixed gradient पर background-position को animate करना, एक सच्ची compositor-only animation जो हर जगह 60fps पर चलती है। सामान्य प्रदर्शन heuristic: यदि आपके पृष्ठ पर एक एकल स्थिर gradient है, आप कभी नोटिस नहीं करेंगे; यदि आप एक लंबी सूची के हर कार्ड पर पाँच animated gradient परतें ढेर कर रहे हैं, शिपिंग से पहले profile करें।

जहाँ gradients अपना स्थान कमाते हैं

• Hero अनुभाग पृष्ठभूमियाँ। पृष्ठ शीर्षक के पीछे नरम ब्रांड-रंग gradients, अक्सर वायुमंडलीय गहराई के लिए सूक्ष्म radial overlays के साथ। Stripe, Linear और अधिकांश आधुनिक SaaS landing pages इस पर निर्भर हैं।
• Button styling। प्राथमिक CTA buttons पर सूक्ष्म gradients वह स्पर्शनीय गहराई जोड़ते हैं जो सपाट ठोस रंगों के पास नहीं है। थोड़ा गहरा hover-state gradient जोड़ें और button जीवंत महसूस होता है।
• पाठ पठनीयता के लिए छवि overlays। एक ऊर्ध्वाधर linear-gradient जो शीर्ष पर पारदर्शी से नीचे गहरे तक फीका होता है, hero छवि के ऊपर सफेद पाठ के साथ गहरे क्षेत्र में परतदार, पाठ को पठनीय बनाता है, चाहे फ़ोटो कैसी भी दिखे।
• कार्ड पृष्ठभूमियाँ। कार्ड पृष्ठभूमियों पर सूक्ष्म gradients भारी box-shadow के बिना गहराई जोड़ते हैं।
• लोडिंग skeletons और प्रगति संकेतक। क्लासिक shimmer skeleton एक linear gradient है जिसमें अर्ध-पारदर्शी सफेद धूसर पृष्ठभूमि पर चलता है, background-position के माध्यम से animated।
• Glassmorphism और आधुनिक UI styling। macOS Big Sur और iOS द्वारा लोकप्रिय किया गया फ्रॉस्टेड-ग्लास प्रभाव, backdrop-filter blur वाली अर्ध-पारदर्शी पृष्ठभूमि, अक्सर highlight प्रभाव के लिए एक सूक्ष्म gradient के साथ परतदार।
• Mesh-gradient नक़ल। असली CSS mesh gradients अभी मानक नहीं हैं (CSS Images Level 5 अंततः उन्हें जोड़ेगा), पर अर्ध-पारदर्शी रंगों के साथ 3-5 बड़े radial gradients ढेर करना आज एक विश्वसनीय mesh-gradient प्रभाव पैदा करता है।

ईमानदार दायरा: यह जनरेटर क्या करता है और क्या नहीं

यह उपकरण लाइव पूर्वावलोकन, विन्यास योग्य कोण (linear के लिए) या स्थिति (radial के लिए), और स्थितियों के साथ किसी भी संख्या के color stops के साथ linear और radial CSS gradients उत्पन्न करता है। यह आधुनिक बिना-प्रीफ़िक्स syntax उत्सर्जित करता है। यह उपकरण वर्तमान में क्या नहीं करता, जो अधिक विस्तृत जनरेटर संभालते हैं: conic gradients (केंद्र-के-चारों-ओर-घूमने वाली विविधता, pie charts, sunbursts और रंग चक्रों के लिए उपयोग की जाती है), कुछ conic-pattern उदाहरणों के लिए Absolutool का CSS Pattern Generator देखें; दोहराव gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) धारियों और pattern-शैली भरावों के लिए, CSS Pattern Generator में भी संभाला जाता है; OKLCH / Oklab interpolation toggle (आधुनिक अनुभवात्मक रूप से समान रंग-स्थान), वर्तमान में sRGB-डिफ़ॉल्ट उत्सर्जित करता है; color hint syntax stops के बीच मध्यबिंदु को विकृत करने के लिए; मल्टी-stop animation keyframes। अधिकांश production gradients (hero पृष्ठभूमियाँ, button शैलियाँ, overlay प्रभाव) के लिए, linear + radial उपयोग मामले को कवर करता है; अधिक विदेशी मामलों के लिए CSS Pattern Generator सही पूरक उपकरण है।

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

क्या CSS ग्रेडिएंट सभी ब्राउज़रों द्वारा समर्थित हैं?

हाँ। CSS ग्रेडिएंट 2013 से सभी प्रमुख ब्राउज़रों द्वारा समर्थित हैं, 98% से अधिक वैश्विक कवरेज के साथ। आपको आधुनिक उपयोग के लिए -webkit- जैसे वेंडर उपसर्गों की आवश्यकता नहीं है।

विकर्ण ग्रेडिएंट के लिए कौन सा कोण उपयोग करें?

135 डिग्री ऊपर-बाएँ से नीचे-दाएँ एक विकर्ण बनाता है, जो सबसे सामान्य है। 45 डिग्री नीचे-बाएँ से ऊपर-दाएँ जाता है। 90 डिग्री बाएँ से दाएँ जाता है, और 180 डिग्री ऊपर से नीचे।

क्या मैं दो से अधिक रंगों का उपयोग कर सकता हूँ?

बिल्कुल। 8 तक रंग स्टॉप जोड़ने के लिए «स्टॉप जोड़ें» पर क्लिक करें। आप प्रत्येक रंग और ग्रेडिएंट के साथ उसकी स्थिति को नियंत्रित कर सकते हैं। मल्टी-स्टॉप ग्रेडिएंट समृद्ध, गतिशील दृश्य प्रभाव बनाते हैं।

क्यों कोई conic gradient विकल्प नहीं है?

Conic gradients (केंद्र-के-चारों-ओर-घूमने वाली विविधता, pie charts, sunbursts और रंग चक्रों के लिए उपयोग की जाती है) linear और radial gradients से एक अलग डिज़ाइन समस्या है, पैरामीटर एक रेखा के साथ स्थितियों के बजाय एक केंद्र के चारों ओर कोण हैं। conic-gradient उदाहरणों और patterns के लिए, Absolutool के CSS Pattern Generator का उपयोग करें, जो pattern-शैली भरावों के लिए अधिक विदेशी मामले (conic, repeating-linear, repeating-conic) संभालता है। यह जनरेटर linear+radial मामलों पर ध्यान केंद्रित करता है जो production hero-और-button gradients के बड़े हिस्से को कवर करते हैं।

क्या CSS gradients छवि पृष्ठभूमियों से तेज़ हैं?

अधिकांश मामलों के लिए, हाँ, एक CSS gradient एक HTTP अनुरोध, एक decode pass, और retina displays के लिए आवश्यक multi-resolution asset शिपिंग को समाप्त कर देता है। gradient किसी भी zoom पर vector-पूर्ण है और CSS variables के माध्यम से तुच्छ रूप से रंग बदलने योग्य है। व्यापार: gradients GPU-पेंट किए गए हैं पर paint लागत pixel क्षेत्र और stop जटिलता के साथ बढ़ती है; एक पूर्ण-viewport hero पर कई gradient परतें ढेर करना निचले-स्तरीय GPUs पर frames खर्च कर सकता है। animation के लिए, gradient color stops (पूर्ण repaint, महंगा) के बजाय background-position (केवल-compositor, सस्ता) को animate करें। कार्डों या hero अनुभागों पर एकल स्थिर gradients, कभी नज़र नहीं आता।

क्या मेरा डेटा कहीं भेजा जाता है?

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

संबंधित टूल