पाठ ग्रेडिएंट

कैसे उपयोग करें

1. अपने रंग चुनें: पिकर का उपयोग करके ग्रेडिएंट के लिए दो या अधिक रंग चुनें।
2. कोण और शैली समायोजित करें: रैखिक या रेडियल ग्रेडिएंट चुनें, कोण समायोजित करें।
3. CSS कॉपी करें: जनरेट किया गया CSS background-clip: text और -webkit-background-clip: text का उपयोग करता है।

ग्रेडिएंट टेक्स्ट जनरेटर क्यों इस्तेमाल करें?

ग्रेडिएंट टेक्स्ट शीर्षकों, लोगो और कॉल-टू-एक्शन टेक्स्ट के लिए सबसे लोकप्रिय आधुनिक CSS प्रभावों में से एक है।

विशेषताएँ

• कई रंग स्टॉप: जटिल ग्रेडिएंट प्रभावों के लिए जितने चाहें उतने रंग स्टॉप जोड़ें।
• रैखिक और रेडियल: दिशात्मक रैखिक ग्रेडिएंट और केंद्रित रेडियल ग्रेडिएंट के बीच चुनें।
• कोण नियंत्रण: दृश्य डायल के साथ 0° से 360° तक ग्रेडिएंट कोण समायोजित करें।
• लाइव पूर्वावलोकन: अपने नमूने के साथ वास्तविक समय में अपना ग्रेडिएंट टेक्स्ट अपडेट होते देखें।
• क्रॉस-ब्राउज़र CSS: आउटपुट में अधिकतम संगतता के लिए -webkit उपसर्ग और fallback शामिल हैं।

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

CSS ग्रेडिएंट टेक्स्ट कैसे काम करता है?

CSS ग्रेडिएंट टेक्स्ट तत्व की पृष्ठभूमि में ग्रेडिएंट लगाकर और फिर उस पृष्ठभूमि को टेक्स्ट के आकार में क्लिप करके काम करता है।

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

CSS ग्रेडिएंट टेक्स्ट सभी आधुनिक ब्राउज़रों, Chrome, Firefox, Safari और Edge में काम करता है। -webkit-background-clip प्रॉपर्टी व्यापक रूप से समर्थित है।

क्या मैं इसे किसी भी फ़ॉन्ट आकार पर उपयोग कर सकता हूँ?

हाँ। ग्रेडिएंट टेक्स्ट फ़ॉन्ट आकार के साथ पूरी तरह से अनुकूल होता है, यह शुद्ध CSS है, छवि नहीं, इसलिए किसी भी रिज़ॉल्यूशन पर तेज़ रहता है।

वेब पर ग्रेडिएंट टेक्स्ट का संक्षिप्त इतिहास

ग्रेडिएंट टेक्स्ट वेब पर WebKit की -webkit-background-clip: text प्रॉपर्टी के साथ दृश्य रूप से संभव हो गया, जो WebKit टीम द्वारा 2008 में प्रस्तावित एक प्रायोगिक Safari/Chromium एक्सटेंशन था, जो टेक्स्ट के ग्लिफ़ आकारों को मनमानी पृष्ठभूमि (ग्रेडिएंट, छवि, कुछ भी) से भरने के तरीके के रूप में था। यह तकनीक वर्षों तक अनौपचारिक रही: Firefox ने अनप्रिफ़िक्स्ड background-clip: text केवल संस्करण 49 (सितंबर 2016) में जारी किया, और CSS Backgrounds Module Level 4 ने इसे लगभग 2018 से W3C कार्य ड्राफ्ट के रूप में औपचारिक रूप दिया। अंतर्निहित ग्रेडिएंट सिंटैक्स अलग से परिपक्व हुआ। CSS Images Module Level 3 (W3C अनुशंसा 2017) ने linear-gradient() और radial-gradient() को प्रथम श्रेणी की छवि मानों के रूप में मानकीकृत किया; conic-gradient() Module Level 4 में आया (Chrome 69 सितंबर 2018, Safari 12.1 मार्च 2019, Firefox 83 नवंबर 2020)। इन दोनों विनिर्देशों का संयोजन वह है जो आज एक-लाइन ग्रेडिएंट शीर्षक को संभव बनाता है। डेवलपर समुदाय में अपनाना तब विस्फोटित हुआ जब Tailwind CSS ने अपनी bg-clip-text यूटिलिटी कक्षाएं v1.4 (2020) में भेजीं, जिससे ग्रेडिएंट शीर्षक एक ड्रॉप-इन प्रिमिटिव बन गए। आधुनिक ब्रांड पहचान अब दृश्य हस्ताक्षर के रूप में ग्रेडिएंट टेक्स्ट पर निर्भर करती है: Stripe की «Bridges» हीरो, Linear का ग्रेडिएंट लोगोटाइप, Vercel का लैंडिंग पेज, Apple का WWDC मार्केटिंग, और Notion का टेम्पलेट स्टोर सभी इस तकनीक का उपयोग करते हैं। संयुक्त background-clip: text + ग्रेडिएंट पैटर्न ने प्रभावी रूप से «स्टाइलाइज़्ड शीर्षक का PNG» को बदल दिया है जो 2005-2015 वेब डिज़ाइन पर हावी था, एक ही चाल में सुलभता और प्रदर्शन समस्याओं की एक श्रेणी को हटा दिया।

CSS ग्रेडिएंट टेक्स्ट की शारीरिक रचना

• ग्रेडिएंट स्वयं। background-image: linear-gradient(90deg, #f00, #00f) तत्व की पृष्ठभूमि को 90-डिग्री ग्रेडिएंट पर सेट करता है जो लाल से नीले रंग तक चलता है। ग्रेडिएंट रैखिक (दिशात्मक), रेडियल (केंद्रित), शंक्वाकार (घूर्णी स्वीप), या किसी भी दोहराई जाने वाली विविधताओं में से कोई हो सकता है। CSS ग्रेडिएंट छवि मान हैं, न कि रंग मान, जो उन्हें टेक्स्ट आकार के लिए क्लिप करने योग्य बनाता है।
• background-clip: text। ब्राउज़र को बताता है कि पृष्ठभूमि को केवल रेंडर किए गए ग्लिफ़ की ज्यामिति के भीतर रेंडर करें। इस एक प्रॉपर्टी के बिना, ग्रेडिएंट पूरे तत्व बॉक्स को भर देता है; इसके साथ, ग्रेडिएंट टेक्स्ट आउटलाइन तक सीमित है। मूल रूप से एक WebKit एक्सटेंशन जिसे -webkit-background-clip: text के रूप में प्रिफ़िक्स्ड किया गया था, अब Firefox 49+ (2016) और Chromium-आधारित ब्राउज़र में भी अनप्रिफ़िक्स्ड है।
• color: transparent या -webkit-text-fill-color: transparent। एक बार पृष्ठभूमि टेक्स्ट पर क्लिप हो जाने के बाद, दृश्यमान परिणाम अभी भी इस बात पर निर्भर करता है कि टेक्स्ट स्वयं पृष्ठभूमि पर कौन सा रंग पेंट करता है। color: transparent (या प्रिफ़िक्स्ड -webkit-text-fill-color: transparent) सेट करने से ग्रेडिएंट दिखाई देता है। इसके बिना, ठोस टेक्स्ट रंग बस क्लिप किए गए ग्रेडिएंट पर पेंट होगा।
• -webkit- प्रिफ़िक्स श्रृंखला। Safari, सबसे अधिक संचित प्रिफ़िक्स इतिहास वाला प्लेटफ़ॉर्म, अभी भी अनप्रिफ़िक्स्ड प्रॉपर्टीज़ को पार्स करता है लेकिन विरासत कारणों से प्रिफ़िक्स्ड संस्करण उत्पादन कोड में बने रहते हैं। इस जनरेटर का आउटपुट background-clip: text और -webkit-background-clip: text दोनों को शामिल करता है ताकि तकनीक Safari 14 और किसी भी विरासत WebKit-आधारित ब्राउज़र तक काम करे।
• ग्रेडिएंट प्रकार और स्टॉप। linear-gradient(angle, color1, color2, ...) एक दिशा में जाता है; radial-gradient(shape at position, ...) एक बिंदु से निकलता है; conic-gradient(from angle at position, ...) घड़ी की सुई की तरह चारों ओर घूमता है। प्रत्येक मनमाने ढंग से कई रंग स्टॉप स्वीकार करता है, स्पष्ट पदों के साथ (red 0%, blue 50%, green 100%) जहां प्रत्येक रंग शुरू होता है और समाप्त होता है, उस पर बारीक नियंत्रण के लिए।

वास्तविक दुनिया के ग्रेडिएंट टेक्स्ट पैटर्न

• ब्रांड पहचान शीर्षक। Stripe की «Bridges» श्रृंखला, Linear का प्रोडक्ट हीरो, Vercel का «Develop. Preview. Ship.» बैनर सभी ब्रांड हस्ताक्षर के रूप में ग्रेडिएंट टेक्स्ट का उपयोग करते हैं। प्रारंभिक चरण के SaaS के लिए सिंगल-कलर वर्डमार्क पुराने लगते हैं, जबकि ग्रेडिएंट शीर्षक «2024 में बनाया गया» दृश्य संकेत ले जाते हैं।
• हीरो अनुभाग शीर्षक। लैंडिंग पेज पर H1 अक्सर उच्चतम डिज़ाइन बजट वाला एकल टेक्स्ट तत्व होता है। ग्रेडिएंट टेक्स्ट इसे कस्टम फ़ॉन्ट फ़ाइल, SVG या हीरो छवि का सहारा लिए बिना दृश्य भार देता है, ये सभी पृष्ठ भार और सुलभता संबंधी चिंताएं जोड़ते हैं।
• बड़ी-संख्या मेट्रिक पेज। मूल्य निर्धारण पेज («$0 शुरू करने के लिए»), आँकड़ा कॉलआउट («10× तेज़»), और डैशबोर्ड सारांश संख्या को आँख पर लाने के लिए ग्रेडिएंट टेक्स्ट का उपयोग करते हैं। ग्रेडिएंट पुराने डिज़ाइनों के «संख्या के पीछे रंगीन वृत्त» पैटर्न को प्रभावी रूप से बदल देता है।
• कॉल-टू-एक्शन बटन। CTA टेक्स्ट पर एक सूक्ष्म ग्रेडिएंट (बटन पृष्ठभूमि के बजाय) ठोस रंग की तुलना में अधिक परिष्कृत लगता है और एक ग्लासमॉर्फिज्म या न्यूमॉर्फिक बटन सतह के साथ अच्छी तरह से जोड़ता है। तकनीक फिनटेक और डिज़ाइन-टूल ब्रांडों में आम है।
• नेविगेशन हाइलाइट। नेविगेशन लिंक पर एक सक्रिय या होवर स्थिति अंडरलाइन या पृष्ठभूमि रंग परिवर्तन जोड़े बिना दृश्य प्रतिक्रिया प्रदान करने के लिए ग्रेडिएंट टेक्स्ट का उपयोग कर सकती है। इस पैटर्न का प्रलेखन साइटों (Stripe Docs, Tailwind Docs) में भारी उपयोग होता है।
• डार्क मोड और ब्रांड-ब्रिज डिज़ाइन। ग्रेडिएंट टेक्स्ट विशेष रूप से अंधेरी पृष्ठभूमि पर अच्छा काम करता है क्योंकि संतृप्त रंग व्यस्त हल्की सतह के विरुद्ध प्रतिस्पर्धा किए बिना उभरते हैं। कई उत्पाद लाइट मोड पर ठोस-रंग शीर्षकों को रखते हैं और डार्क मोड पर ग्रेडिएंट पर स्विच करते हैं (CSS वेरिएबल स्वैप का उपयोग करके)।
• ई-कॉमर्स उत्पाद कॉलआउट। «सेल», «नया», «सीमित संस्करण» बैज और उत्पाद उपशीर्षक आइकन एसेट की आवश्यकता के बिना खुद को बॉडी कॉपी से अलग करने के लिए ग्रेडिएंट टेक्स्ट का उपयोग करते हैं। Shopify का स्टोरफ्रंट संपादक 2024 में ग्रेडिएंट टेक्स्ट को एक अंतर्निहित विकल्प के रूप में सामने लाता है।

सुलभता विचार

• WCAG 2.1 SC 1.4.3 कंट्रास्ट (न्यूनतम)। सफलता मानदंड सामान्य टेक्स्ट के लिए टेक्स्ट और पृष्ठभूमि के बीच कम से कम 4.5:1 कंट्रास्ट की आवश्यकता है (बड़े टेक्स्ट के लिए 3:1, जिसे 18pt+ या 14pt बोल्ड के रूप में परिभाषित किया गया है)। ग्रेडिएंट टेक्स्ट का मूल्यांकन कठिन है क्योंकि कंट्रास्ट अनुपात ग्रेडिएंट के साथ बदलता है। सुरक्षित दृष्टिकोण: सुनिश्चित करें कि आपके ग्रेडिएंट में सबसे हल्का रंग अभी भी पृष्ठभूमि के विरुद्ध अनुपात को पूरा करता है। WebAIM Contrast Checker और Figma में Stark जैसे उपकरण मदद कर सकते हैं।
• पहले सबसे गहरा ग्रेडिएंट रंग चुनें। हल्के पृष्ठभूमि के साथ ग्रेडिएंट को जोड़ते समय, ग्रेडिएंट के सबसे हल्के रंग को 4.5:1 अनुपात को पार करने के लिए चुनना यह सुनिश्चित करता है कि ग्रेडिएंट का बाकी हिस्सा भी सुलभ है। यही गहरी पृष्ठभूमि पर विपरीत दिशा में लागू होता है। WCAG 2.2 (अनुशंसा अक्टूबर 2023) ने दृश्य प्रस्तुति पर मार्गदर्शन को कड़ा किया, जिसमें वह मामला भी शामिल है जहां टेक्स्ट कंट्रास्ट रन में भिन्न होता है।
• स्क्रीन रीडर टेक्स्ट को अपरिवर्तित देखते हैं। क्योंकि ग्रेडिएंट विशुद्ध रूप से एक दृश्य शैली है (background-clip, color), सहायक तकनीक रेंडर किए गए टेक्स्ट सामग्री को पढ़ती है चाहे वह कैसे भी रंगीन हो। ग्रेडिएंट टेक्स्ट के साथ कोई «वैकल्पिक टेक्स्ट» चिंता नहीं है, रास्टराइज़्ड छवि-टेक्स्ट या SVG-टेक्स्ट-बिना-टेक्स्ट-एलिमेंट के विपरीत।
• prefers-reduced-motion। एनिमेटेड ग्रेडिएंट (background-position संक्रमण, रंग-चक्र एनिमेशन) को @media (prefers-reduced-motion: no-preference) में लपेटा जाना चाहिए ताकि वेस्टिबुलर विकार या गति संवेदनशीलता वाले उपयोगकर्ता एक स्थिर ग्रेडिएंट देखें। CSS Working Group ने मीडिया क्वेरी 2017 में जोड़ी; ब्राउज़र समर्थन 2020 से सार्वभौमिक रहा है।
• ब्राउज़र ज़ूम और टेक्स्ट का आकार बदलें। WCAG 2.1 SC 1.4.4 के लिए आवश्यक है कि टेक्स्ट सामग्री के नुकसान के बिना 200% तक आकार बदलने योग्य हो। ग्रेडिएंट टेक्स्ट पूरी तरह से स्केल करता है क्योंकि यह विशुद्ध रूप से CSS-रेंडर किया गया है (कोई रास्टराइज़ेशन नहीं)। कम दृष्टि वाले उपयोगकर्ता जो Ctrl+/Cmd+ ज़ूम का उपयोग करते हैं, किसी भी ज़ूम स्तर पर ग्रेडिएंट को कुरकुरा रहते हुए देखेंगे।
• प्रिंट स्टाइलशीट। अधिकांश ब्राउज़र प्रिंट पर पृष्ठभूमि-क्लिप किए गए रंगों को छोड़ देते हैं क्योंकि मुद्रित पृष्ठ कागज़ पर स्याही की अपेक्षा करता है, और ग्रेडिएंट पृष्ठभूमि गायब हो जाती है। हमेशा एक @media print ओवरराइड प्रदान करें जो ग्रेडिएंट टेक्स्ट पर एक ठोस color सेट करता है ताकि मुद्रित प्रतियां पढ़ने योग्य रहें। कई डिज़ाइनर यह भूल जाते हैं; ग्रेडिएंट शीर्षक छापना अक्सर अदृश्य टेक्स्ट उत्पन्न करता है।
• फॉलबैक रंग श्रृंखला। हमेशा पहले एक ठोस color प्रॉपर्टी सेट करें, फिर color: transparent (या -webkit-text-fill-color: transparent) जोड़ें ताकि background-clip: text समर्थन के बिना ब्राउज़र (विरासत IE, बहुत पुराने Android ब्राउज़र) अदृश्य टेक्स्ट के बजाय ठोस-रंग टेक्स्ट देखें। जनरेटर का आउटपुट डिफ़ॉल्ट रूप से इस फॉलबैक को शामिल करता है।

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

ग्रेडिएंट टेक्स्ट को आधुनिक ब्रांड हस्ताक्षर क्यों माना जाता है?

दो कारण। पहला, तकनीकी कारण: ग्रेडिएंट टेक्स्ट 2017-2020 के आसपास पूरी तरह से क्रॉस-ब्राउज़र हो गया, इसलिए जो डिज़ाइन इसका उपयोग करते हैं वे दृश्य रूप से «हाल ही में बनाया गया» दृश्य संकेत ले जाते हैं, जिस तरह से flat design ने «2013» कहा या स्क्यूओमॉर्फिज्म ने «2010» कहा। दूसरा, सांस्कृतिक कारण: Stripe, Linear, Vercel, और Apple WWDC ने 2020-2024 फिनटेक और डेवलपर-टूल मार्केटिंग की लहर में ग्रेडिएंट टेक्स्ट को ब्रांड पहचान तत्व के रूप में लोकप्रिय बनाया। उसी दृश्य भाषा को अपनाना उस डिज़ाइन वंश से संबंधित होने का संकेत देता है।

मैं ग्रेडिएंट टेक्स्ट प्रभाव को कैसे एनिमेट करूं?

सबसे आम तकनीक एक बड़े आकार के ग्रेडिएंट पर background-position को एनिमेट करती है। background-size: 200% 200% सेट करें और 3-5 सेकंड के लूप पर background-position को 0% 0% से 100% 100% तक एनिमेट करें। कीफ़्रेम को हमेशा @media (prefers-reduced-motion: no-preference) में लपेटें ताकि गति संवेदनशीलता वाले उपयोगकर्ता स्थिर संस्करण देखें। व्यक्तिगत रंग-स्टॉप को सीधे एनिमेट करने से बचें: CSS वर्तमान में ब्राउज़रों के बीच ग्रेडिएंट मानों के बीच सुचारू रूप से इंटरपोलेट नहीं करता है, हालांकि CSS @property (W3C उम्मीदवार अनुशंसा 2022) इसे सक्षम करना शुरू कर रहा है।

क्या खोज इंजन और स्क्रीन रीडर ग्रेडिएंट टेक्स्ट देख सकते हैं?

हां। ग्रेडिएंट टेक्स्ट शुद्ध HTML टेक्स्ट है जिसे CSS के साथ स्टाइल किया गया है; DOM में अभी भी वास्तविक अक्षर हैं। Google, Bing, स्क्रीन रीडर (NVDA, JAWS, VoiceOver), और कोई भी टेक्स्ट-एक्सट्रैक्शन उपकरण सामग्री को बिल्कुल वैसे ही पढ़ते हैं जैसे यह सादा ठोस-रंग वाला टेक्स्ट हो। यह मुख्य कारणों में से एक है जिसके लिए ग्रेडिएंट CSS टेक्स्ट ने पुराने «स्टाइलाइज़्ड शीर्षक का PNG» पैटर्न को प्रतिस्थापित किया: वे छवियां मैनुअल वैकल्पिक टेक्स्ट के बिना खोज और स्क्रीन रीडर के लिए अदृश्य थीं।

क्या ग्रेडिएंट टेक्स्ट HTML ईमेल में काम करता है?

अधिकतर नहीं। Outlook डेस्कटॉप (Word रेंडरिंग इंजन) background-clip को हटा देता है; Gmail का वेब क्लाइंट इसे असंगत रूप से समर्थन करता है; Apple Mail और आधुनिक Gmail मोबाइल क्लाइंट आमतौर पर इसे सही ढंग से रेंडर करते हैं। ईमेल अभियानों के लिए, सुरक्षित दृष्टिकोण फॉलबैक ठोस-रंग शीर्षक भेजना और ग्रेडिएंट टेक्स्ट को उन क्लाइंट के लिए «प्रगतिशील सुधार» के रूप में मानना है जो इसका समर्थन करते हैं। कुछ टीमें शीर्षक को वैकल्पिक टेक्स्ट के साथ PNG/SVG के रूप में पूर्व-संरचना करती हैं और सुलभता समझौते को स्वीकार करती हैं।

टेक्स्ट ग्रेडिएंट में कौन से रंग एक साथ सबसे अच्छे काम करते हैं?

तीन पैटर्न प्रभावी होते हैं। समान (पहिये पर एक-दूसरे के बगल में रंग, उदाहरण के लिए नीला → बैंगनी → गुलाबी) सुगम, ब्रांड-अनुकूल परिणाम देता है, और अधिकांश आधुनिक डिज़ाइन सिस्टम के लिए डिफ़ॉल्ट है। पूरक (पहिये पर विपरीत, उदाहरण के लिए नीला → नारंगी) मजबूत कंट्रास्ट बनाता है लेकिन लंबे टेक्स्ट में भड़कीला दिख सकता है। ब्रांड-रंगा (आपका प्राथमिक ब्रांड रंग सूक्ष्म चमक/संतृप्ति भिन्नता के साथ) एक परिष्कृत प्रभाव उत्पन्न करता है जो सजावटी के बजाय एकीकृत महसूस होता है। एक शीर्षक में तीन से अधिक रंगों को मिलाने से बचें; जटिल ग्रेडिएंट आइकन और ग्राफिक तत्वों के लिए बेहतर रखे जाते हैं।