CSS ग्रेडिएंट कैसे बनाएँ

CSS ग्रेडिएंट आपको बिना छवि फ़ाइलों के सहज रंग संक्रमण बनाने देते हैं। वे छवियों से हल्के होते हैं, किसी भी स्क्रीन आकार के लिए पूरी तरह से स्केल करते हैं, और अनुकूलित करने में आसान होते हैं। एक विशिष्ट सजावटी ग्रेडिएंट एक समकक्ष JPG या PNG की तुलना में 20-100 KB बचाता है, और गुणवत्ता हानि के बिना किसी भी रिज़ॉल्यूशन तक स्केल करता है।

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

रैखिक ग्रेडिएंट: रंग एक सीधी रेखा में संक्रमण करते हैं (ऊपर से नीचे, बाएँ से दाएँ, या किसी भी कोण पर)।

background: linear-gradient(135deg, #667eea, #764ba2);

रेडियल ग्रेडिएंट: रंग एक केंद्र बिंदु से बाहर की ओर एक गोलाकार या अण्डाकार पैटर्न में विकीर्ण होते हैं।

background: radial-gradient(circle, #667eea, #764ba2);

शंकु ग्रेडिएंट: रंग एक केंद्र बिंदु के चारों ओर घूमते हैं, जैसे एक रंग चक्र।

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

ग्रेडिएंट को नेत्रहीन रूप से कैसे बनाएं

1. ग्रेडिएंट प्रकार चुनें: रैखिक या रेडियल चुनें और कोण या स्थिति सेट करें।
2. रंग स्टॉप जोड़ें: ग्रेडिएंट के साथ विभिन्न स्थानों पर रंग जोड़ने के लिए क्लिक करें। प्रत्येक रंग और उसकी स्थिति को समायोजित करें।
3. CSS कॉपी करें: जनरेट किए गए कोड को कॉपी करें और इसे अपनी स्टाइलशीट में पेस्ट करें।

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

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

CSS ग्रेडिएंट के अस्तित्व से पहले, वेब डिज़ाइनरों को किसी भी ग्रेडिएंट प्रभाव के लिए पृष्ठभूमि छवियों का उपयोग करना पड़ता था: एक एकल-कॉलम GIF को क्षैतिज रूप से टाइल करें, या Photoshop PSD को कई JPG में काटें। यह काम करता था लेकिन फ़ाइल वज़न, नेटवर्क अनुरोध और ज़ूम करने पर पिक्सेलाइज़ेशन जोड़ता था।

WebKit ने Safari 4 (जून 2009) में पहला -webkit-gradient() कार्यान्वयन एक वाचाल, पढ़ने में कठिन सिंटैक्स के साथ जोड़ा। Firefox 3.6 (जनवरी 2010) ने -moz-linear-gradient() के साथ अनुसरण किया। CSS कार्य समूह ने CSS Image Values Level 3 (2012) में बिना उपसर्ग के linear-gradient() और radial-gradient() को मानकीकृत किया, जिस बिंदु पर ब्राउज़र उपसर्ग गायब होने लगे।

शंकु ग्रेडिएंट (conic-gradient()) बहुत बाद में आए, पहली बार Chrome 69 (सितंबर 2018) में शिप किए गए और Safari 12.1 (मार्च 2019) तक सभी प्रमुख ब्राउज़रों तक पहुंचे। वे दृश्य पैटर्न को सक्षम करते हैं जो पहले छवियों के बिना असंभव थे: पाई चार्ट, रंग चक्र, चेकरबोर्ड, सूर्यविन्यास पैटर्न।

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

सामान्य ग्रेडिएंट पैटर्न

हीरो सेक्शन पृष्ठभूमि: एक सूक्ष्म दो-रंग ग्रेडिएंट टेक्स्ट से ध्यान भटकाए बिना गहराई जोड़ता है।

background: linear-gradient(135deg, #0f172a, #1e3a5f);

बटन हाइलाइट: एक हल्का ग्रेडिएंट बटन को त्रि-आयामी महसूस कराता है।

background: linear-gradient(180deg, #3b82f6, #2563eb);

छवियों पर ओवरले: एक ग्रेडिएंट ओवरले फ़ोटो पर टेक्स्ट की पठनीयता में सुधार करता है।

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

एक्सेंट बॉर्डर: दृश्य रुचि के लिए ग्रेडिएंट को बॉर्डर के रूप में उपयोग करें।

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

एनिमेटेड मेश ग्रेडिएंट: कई रेडियल ग्रेडिएंट स्टैक करें और स्थितियों को एनिमेट करें।

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

ग्लास मॉर्फिज़्म बैकड्रॉप: कम-अपारदर्शिता ग्रेडिएंट को बैकड्रॉप-फ़िल्टर ब्लर के साथ जोड़ें।

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

रंग स्टॉप स्थान निर्धारण

डिफ़ॉल्ट रूप से, रंग स्टॉप समान रूप से वितरित होते हैं। आप उनकी स्थितियों को ओवरराइड करके नियंत्रित कर सकते हैं कि प्रत्येक रंग कहाँ दिखाई दे:

/* पीला मध्य 60% में, किनारों पर लाल में फीका पड़ रहा है */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

आप एंटी-अलियासिंग के बिना धारियाँ या ज्यामितीय पैटर्न बनाने के लिए हार्ड स्टॉप का भी उपयोग कर सकते हैं:

/* बिना संक्रमण के दो-रंग धारियाँ */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

चाल यह है कि दो रंग स्टॉप को एक ही स्थान पर रखें। ब्राउज़र उनके बीच इंटरपोलेट नहीं करता है, जिससे एक तेज़ धार बनती है।

ग्रेडिएंट बनाम ठोस रंग बनाम छवियों का उपयोग कब करें

• ठोस रंग: प्राथमिक सतह पृष्ठभूमि (कार्ड, मोडल्स, नेविगेशन) के लिए सबसे अच्छा। पूर्वानुमेय और पठनीय।
• CSS ग्रेडिएंट: सजावटी पृष्ठभूमि, हीरो सेक्शन, बटन होवर स्थितियाँ, ओवरले प्रभावों के लिए सबसे अच्छा। कम फ़ाइल वज़न, स्केलेबल, एनिमेट करने योग्य।
• पृष्ठभूमि छवि (JPG/PNG): फ़ोटोग्राफ़िक पृष्ठभूमि या जटिल कलाकृति के लिए सबसे अच्छा जिसे ग्रेडिएंट प्रतिकृति नहीं बना सकते।
• SVG ग्रेडिएंट: सबसे अच्छा जब आपको आइकन या चित्रण के हिस्से के रूप में ग्रेडिएंट की आवश्यकता हो, विशेष रूप से यदि ग्रेडिएंट को SVG ज्यामिति के साथ स्केल करना चाहिए।

एक सामान्य पैटर्न तीनों को परत में रखना है: एक ठोस रंग आधार, एक CSS ग्रेडिएंट ओवरले, और शीर्ष पर एक कम-अपारदर्शिता बनावट छवि।

सामान्य कठिनाइयां

• सहज ग्रेडिएंट पर बैंडिंग: 8-बिट रंग डिस्प्ले (पुराने मॉनिटर, कुछ मोबाइल स्क्रीन) पर, समान रंगों के साथ सहज ग्रेडिएंट दृश्य बैंड दिखा सकते हैं। एक सूक्ष्म शोर बनावट ओवरले जोड़ने से यह विरूपण कम होता है।
• ग्रेडिएंट कोण भ्रम: linear-gradient(0deg, ...) नीचे से शुरू होता है और ऊपर जाता है; linear-gradient(90deg, ...) बाएँ से दाएँ जाता है; linear-gradient(180deg, ...) ऊपर से नीचे जाता है। कोण उस दिशा को इंगित करता है जिस ओर ग्रेडिएंट प्रवाहित होता है, न कि कहाँ से।
• कई स्टॉप के साथ प्रदर्शन: 20+ रंग स्टॉप वाला ग्रेडिएंट अधिक GPU मेमोरी का उपयोग करता है और मोबाइल पर स्क्रॉलिंग को धीमा कर सकता है। मेश-ग्रेडिएंट प्रभावों के लिए, अक्सर 3-5 स्टॉप बहुत बेहतर प्रदर्शन के साथ लगभग समान दृश्य परिणाम उत्पन्न करते हैं।
• ग्रेडिएंट पर पाठ कंट्रास्ट: एक हेडर जो ग्रेडिएंट के सबसे हल्के हिस्से के विरुद्ध अच्छा पढ़ता है, सबसे गहरे हिस्से पर अपठनीय हो सकता है। सुरक्षा जाल के रूप में text-shadow गुण या गहरे पाठ रूपरेखा का उपयोग करें।
• पुराने ब्राउज़र संगतता: यदि आपको IE11 या बहुत पुराने मोबाइल ब्राउज़रों का समर्थन करना चाहिए, तो शंकु ग्रेडिएंट उपलब्ध नहीं हैं। रैखिक और रेडियल ग्रेडिएंट हर जगह आधुनिक काम करते हैं।
• RTL भाषाओं में ग्रेडिएंट दिशा: अरबी या हिब्रू लेआउट में बाएँ से दाएँ ग्रेडिएंट पाठक के दृष्टिकोण से पीछे की ओर बहता है। दोनों दिशाओं में परीक्षण करें या CSS तार्किक गुणों का उपयोग करें।

सुझाव

• इसे सूक्ष्म रखें: सबसे अच्छे ग्रेडिएंट बमुश्किल ध्यान देने योग्य होते हैं। दो समान रंगों के बीच मामूली बदलाव गहराई जोड़ता है। नाटकीय इंद्रधनुष ग्रेडिएंट शायद ही कभी पेशेवर दिखते हैं।
• छवियों के बजाय ग्रेडिएंट का उपयोग करें: एक CSS ग्रेडिएंट शून्य नेटवर्क अनुरोधों के साथ तुरंत लोड होता है। जहाँ संभव हो, सजावटी पृष्ठभूमि छवियों को ग्रेडिएंट से बदलें।
• डार्क मोड में परीक्षण करें: ग्रेडिएंट जो हल्की पृष्ठभूमि पर शानदार दिखते हैं, डार्क मोड में फीके पड़ सकते हैं या टकरा सकते हैं। प्रत्येक थीम के लिए विभिन्न ग्रेडिएंट परिभाषित करने पर विचार करें।
• पाठ कंट्रास्ट पर ध्यान दें: यदि आप ग्रेडिएंट पर पाठ रख रहे हैं, तो जांच लें कि पाठ पूरी ग्रेडिएंट सीमा में पठनीय है, केवल सबसे हल्के या सबसे गहरे हिस्से में नहीं।
• रंग स्थान जागरूक सिंटैक्स का उपयोग करें: linear-gradient(in oklch, #667eea, #764ba2) डिफ़ॉल्ट sRGB इंटरपोलेशन की तुलना में चिकनी अवधारणात्मक संक्रमण उत्पन्न करता है। Chrome 113+, Safari 16.4+, Firefox 113+ में समर्थित।
• DevTools के साथ निरीक्षण करें: Chrome और Firefox DevTools एक दृश्य ग्रेडिएंट संपादक दिखाते हैं जब आप शैलियाँ पैनल में ग्रेडिएंट मान पर होवर करते हैं। मौजूदा ग्रेडिएंट को ट्वीक करने का सबसे तेज़ तरीका।

गोपनीयता

CSS ग्रेडिएंट जनरेटर पूरी तरह से आपके ब्राउज़र में चलता है। आप जो रंग चुनते हैं, जिन ग्रेडिएंट कॉन्फ़िगरेशन के साथ आप प्रयोग करते हैं, और जो CSS आप जनरेट करते हैं, वे कभी भी आपके डिवाइस को नहीं छोड़ते हैं। कोई टेलीमेट्री नहीं, कोई उपयोग ट्रैकिंग नहीं, आपके डिज़ाइन विकल्पों का कोई अपलोड नहीं। डिज़ाइन अन्वेषण के दौरान उपयोग किए जाने वाले उपकरणों के लिए, यह मायने रखता है: आप जो रंग और पैटर्न आज़माते हैं, वे आने वाली ब्रांड दिशाएँ, अघोषित उत्पाद थीम या NDA के तहत क्लाइंट कार्य प्रकट कर सकते हैं। केवल-ब्राउज़र जनरेशन इन सबको आपकी मशीन पर रखती है।