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

यह कैसे काम करता है

1. रंग चुनें: पिकर के माध्यम से ग्रेडिएंट के लिए दो या अधिक रंग चुनें।
2. चौड़ाई और रेडियस सेट करें: अपने डिज़ाइन के अनुसार मोटाई और कोनों की गोलाई समायोजित करें।
3. CSS कॉपी करें: border-image या छद्म-तत्व तकनीक से जनरेट किया गया कोड आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है।

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

CSS ग्रेडिएंट बॉर्डर आधुनिक UI फ़्रेमवर्क, कार्ड, बटन होवर स्थितियों में उपयोग किया जाने वाला आकर्षक डिज़ाइन विवरण है।

विशेषताएँ

• दो विधियाँ: border-image (सरल) और background-clip के साथ छद्म-तत्व तकनीक (border-radius संभालती है) में से चुनें।
• Border-radius समर्थन: छद्म-तत्व विधि गोल कोनों की अनुमति देती है जो border-image नहीं कर सकती।
• मल्टी-स्टॉप ग्रेडिएंट: इंद्रधनुष या ब्रांड-रंग प्रभावों के लिए जितने चाहें उतने रंग चरण जोड़ें।
• लाइव पूर्वावलोकन: कोड कॉपी करने से पहले बॉर्डर की सटीक रेंडरिंग देखें।
• कोण नियंत्रण: दृश्य कोण चयनकर्ता के साथ ग्रेडिएंट दिशा घुमाएँ।

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

मैं border-image को border-radius के साथ क्यों नहीं उपयोग कर सकता?

border-image बॉर्डर के रेंडरिंग को पूरी तरह से बदल देता है और border-radius को अनदेखा करता है, कोने वर्गाकार बने रहते हैं। ग्रेडिएंट बॉर्डर और गोल कोनों को मिलाने के लिए, स्यूडो-एलिमेंट तकनीक का उपयोग करें: ::before की पृष्ठभूमि के रूप में ग्रेडिएंट लागू करें और तत्व पर background-clip: padding-box लागू करें।

क्या मैं ग्रेडिएंट बॉर्डर को एनिमेट कर सकता हूँ?

हाँ। पृष्ठभूमि + स्यूडो-एलिमेंट विधि से बनाए गए ग्रेडिएंट बॉर्डर ग्रेडिएंट पर background-position को ट्रांज़िशन करके एनिमेट किए जा सकते हैं। सहज प्रभाव के लिए background-size: 300% 300% लागू करें और background-position को एनिमेट करें।

क्या यह बटन और इनपुट फ़ील्ड पर काम करता है?

हाँ, उत्पन्न CSS किसी भी HTML तत्व पर काम करता है। बटन के लिए, border-radius को संरक्षित रखने के लिए स्यूडो-एलिमेंट को प्राथमिकता दें। इनपुट फ़ील्ड के लिए, border-image तकनीक लागू करें या फ़ील्ड को एक ग्रेडिएंट कंटेनर में लपेटें।

CSS ग्रेडिएंट बॉर्डर वास्तव में क्या हल करते हैं

CSS border गुण एक एकल ठोस रंग स्वीकार करता है, ग्रेडिएंट नहीं। यह 1996 के युग की एक सीमा है जो आधुनिक CSS तक बनी रही। वेब के अधिकांश इतिहास के लिए, डिज़ाइनर जो कार्ड या बटन के चारों ओर ग्रेडिएंट रूपरेखा चाहते थे, उन्हें पृष्ठभूमि छवि का उपयोग करने (रास्टर, स्केल नहीं करता), तत्व को रंगीन कंटेनर में लपेटने (काम करता है लेकिन सूक्ष्म रूप से लेआउट तोड़ता है), या ठोस बॉर्डर स्वीकार करने के बीच चुनना पड़ता था। CSS ग्रेडिएंट बॉर्डर कार्यवस्थाएँ हैं जो border: 3px solid linear-gradient(...) की उपस्थिति को अन्य CSS गुणों के माध्यम से अनुकरण करती हैं, क्योंकि वह सटीक सिंटैक्स मौजूद नहीं है।

दो तकनीकें हावी हैं। border-image (CSS Backgrounds and Borders Module Level 3, 2012) ग्रेडिएंट या छवि के साथ बॉर्डर रेंडरिंग को बदल देता है। यह काम करता है, लेकिन border-image border-radius को पूरी तरह से अनदेखा करता है: कोने वर्गाकार रहते हैं। छद्म-तत्व + background-clip तकनीक ग्रेडिएंट पृष्ठभूमि के साथ एक रैपर तत्व और एक आंतरिक ओवरले का उपयोग करती है जो बॉर्डर क्षेत्र को छोड़कर सब कुछ मास्क करती है। यह गोल कोनों का समर्थन करता है लेकिन CSS की दो परतों और padding बनाम content boxes के सावधानीपूर्वक हैंडलिंग की आवश्यकता होती है। तीसरा आधुनिक दृष्टिकोण क्लीनर सिंगल-तत्व समाधान के लिए mask-composite (2020+ ब्राउज़र) का उपयोग करता है।

ग्रेडिएंट बॉर्डर वर्तमान डिज़ाइन प्रवृत्तियों के लिए महत्वपूर्ण हैं। कार्ड-आधारित लेआउट (Stripe, Linear, Vercel, Cursor) भारीपन के बिना गहराई जोड़ने के लिए सूक्ष्म दो-रंग के ग्रेडिएंट बॉर्डर का उपयोग करते हैं। प्रीमियम फ़ीचर हाइलाइट्स अक्सर «Pro» स्थिति को दर्शाने के लिए रंगीन ग्रेडिएंट बॉर्डर खींचते हैं। साइबरपंक और सिंथवेव सौंदर्यशास्त्र रेट्रो-फ्यूचर वाइब्स को जगाने के लिए नियॉन ग्रेडिएंट बॉर्डर का उपयोग करते हैं। 2023-2024 में AI उत्पाद लॉन्च ने दृश्य हस्ताक्षर के रूप में मल्टी-कलर एनिमेटेड ग्रेडिएंट बॉर्डर को मानकीकृत किया (OpenAI, Anthropic, Perplexity)। जिसे पहले छवि संपादकों की आवश्यकता थी वह अब 5 से 10 लाइनों के CSS के रूप में भेजा जाता है।

यह उपकरण पर्दे के पीछे कैसे काम करता है

पूर्वावलोकन एक एकल div है जिसमें दो तकनीकें इनलाइन CSS के माध्यम से लागू होती हैं, आपकी विधि पसंद के अनुसार स्विच करने योग्य। border-image के लिए, उपकरण border: Npx solid transparent को border-image: linear-gradient(...) 1 के साथ सेट करता है; 1 स्लाइस मान ब्राउज़र को प्रत्येक बॉर्डर किनारे के लिए पूर्ण आकार में ग्रेडिएंट का उपयोग करने के लिए कहता है। छद्म-तत्व तकनीक के लिए, उपकरण बाहरी तत्व पर एक ग्रेडिएंट पृष्ठभूमि लागू करता है और ::before (या background-clip: padding-box) का उपयोग आंतरिक सामग्री क्षेत्र को मास्क करने के लिए करता है, केवल बॉर्डर रिंग को दिखाई देने के लिए छोड़ता है।

रंग स्टॉप {color, position} जोड़े के JavaScript सरणी के रूप में संग्रहीत होते हैं। जब आप रंग चुनते हैं या कोण स्लाइडर को स्थानांतरित करते हैं, उपकरण कोण के साथ स्टॉप्स को अल्पविरामों से जोड़कर linear-gradient() स्ट्रिंग का पुनर्निर्माण करता है: linear-gradient(45deg, #ff0080 0%, #7928ca 100%)। यह स्ट्रिंग पूर्वावलोकन CSS और कोड बॉक्स दोनों में इंटरपोलेट होती है। कोण स्लाइडर 0 से 360 डिग्री रेंज का उपयोग करता है, अभिविन्यास प्रतिक्रिया के लिए दृश्य SVG तीर रोटेशन के साथ।

आपके ब्राउज़र से कुछ भी नहीं निकलता। ग्रेडिएंट स्ट्रिंग पीढ़ी, रंग भंडारण, पूर्वावलोकन रेंडरिंग और क्लिपबोर्ड कॉपी सभी आपके डिवाइस पर JavaScript में होते हैं। कोई नेटवर्क अनुरोध नहीं किया जाता; आप कौन से रंग चुनते हैं इस पर कोई विश्लेषण ट्रैक नहीं करता। उपकरण के पास पहली लोड पर एक बार परोसे गए स्थिर HTML और JavaScript से परे कोई बैकएंड नहीं है। पृष्ठ ताज़ा करें और आपके चयनित रंग और कोण चले जाते हैं जब तक आपने CSS पहले कॉपी नहीं किया।

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

• CSS 1 बॉर्डर, 1996।पहली CSS विशिष्टता (CSS 1, दिसंबर 1996) border-style, border-width, और border-color को परिभाषित करती है, केवल ठोस रंगों और आठ बॉर्डर शैलियों (none, dotted, dashed, solid, double, groove, ridge, inset, outset) का समर्थन करती है। कोई ग्रेडिएंट समर्थन नहीं, एक स्थापत्य पसंद जो 16 साल तक बनी रहती है।
• CSS linear-gradient शिप होता है, 2008 से 2011।WebKit 2008 में -webkit-gradient() पेश करता है, उसके बाद CSS Image Values and Replaced Content Module Level 3 (2011) में मानकीकृत linear-gradient()। ग्रेडिएंट पृष्ठभूमि के लिए प्रथम श्रेणी के CSS नागरिक बन जाते हैं, लेकिन बॉर्डर के लिए नहीं। डिज़ाइनर तुरंत ग्रेडिएंट बॉर्डर चाहते हैं; विशिष्टता समायोजित नहीं करती।
• border-image आता है, 2012।CSS Backgrounds and Borders Module Level 3 (CR जून 2012) 2014 तक पूर्ण ब्राउज़र समर्थन के साथ border-image को परिभाषित करता है। बॉर्डरों को CSS ग्रेडिएंट सहित किसी भी छवि का उपयोग करने देता है। पकड़: border-image border-radius को ओवरराइड करता है, इसलिए केवल इस तकनीक के साथ गोल ग्रेडिएंट बॉर्डर असंभव रहते हैं।
• छद्म-तत्व कार्यवस्था पैटर्न उभरता है, 2013 से 2015।CSS-Tricks और इसी तरह के संसाधन ग्रेडिएंट पृष्ठभूमि और background-clip: padding-box चाल के साथ ::before छद्म-तत्वों का उपयोग करते हुए कार्यवस्थाएँ प्रकाशित करते हैं। «गोल ग्रेडिएंट बॉर्डर» हल करने योग्य हो जाता है लेकिन बॉक्स-मॉडल की पेचीदगियों को समझने की आवश्यकता होती है। 2015 तक, पैटर्न डिज़ाइन सिस्टम दस्तावेज़ीकरण में व्यापक है।
• conic-gradient उतरता है, 2018 से 2021।CSS conic-gradient() (Chrome 69, सितंबर 2018; Firefox 83, नवंबर 2020; Safari 12.1, मार्च 2019) गोलाकार स्वीप ग्रेडिएंट को सक्षम करता है, ग्रेडिएंट बॉर्डर के साथ «लोडिंग रिंग» प्रभावों के लिए आदर्श। एनीमेशन के साथ संयुक्त, conic-gradient बॉर्डर 2023 में AI उत्पाद लॉन्च में लोकप्रिय घूमने वाले चमक पैटर्न बनाते हैं।
• mask-composite क्लीनर समाधान अनलॉक करता है, 2020 से 2024।आधुनिक ब्राउज़रों (2020+) में CSS Masking Module Level 1 (2014) और mask-composite समर्थन छद्म-तत्वों के बिना सिंगल-तत्व ग्रेडिएंट बॉर्डर की अनुमति देता है: एक ग्रेडिएंट पृष्ठभूमि की परत लगाएँ और मिश्रित संचालन के माध्यम से बाहरी रिंग को छोड़कर सब कुछ मास्क करें। 2024 तक यह सबसे साफ उत्पादन दृष्टिकोण है, हालाँकि छद्म-तत्व कार्यवस्थाएँ पुराने ब्राउज़रों के साथ संगत रहती हैं।

वास्तविक दुनिया के कार्यप्रवाह

• कार्ड-कंपोनेंट सूक्ष्म लहजे।आधुनिक डैशबोर्ड कार्ड (Stripe, Linear, Vercel सोचें) भारीपन के बिना दृश्य रुचि जोड़ने के लिए दो-टोन या तीन-टोन रंग योजनाओं में 1 से 2-पिक्सेल ग्रेडिएंट बॉर्डर का उपयोग करते हैं। ग्रेडिएंट आमतौर पर सूक्ष्म होता है: 10% से 20% अपारदर्शिता, कम कंट्रास्ट, ज्यादातर ग्रेस्केल ब्रांड रंग के संकेत के साथ। यह कार्डों को सपाट पृष्ठभूमि से अलग करने और इंटरैक्टिविटी का संकेत देने के लिए पर्याप्त है।
• प्रीमियम फ़ीचर हाइलाइट्स।SaaS मूल्य निर्धारण तालिकाएँ इसे दृष्टिगत रूप से ऊँचा करने के लिए «Pro» या «अनुशंसित» योजना पर ज्वलंत ग्रेडिएंट बॉर्डर (अक्सर सोना-से-बैंगनी या इंद्रधनुष) का उपयोग करती हैं। पैटर्न काम करता है क्योंकि यह बैज लेबल की आवश्यकता के बिना रंग और गति (यदि एनिमेटेड) के माध्यम से आंख खींचता है। Linear, Notion, Figma और अधिकांश आधुनिक SaaS मूल्य निर्धारण पृष्ठ इस सटीक पैटर्न का उपयोग करते हैं।
• नियॉन और चमक प्रभाव।साइबरपंक, सिंथवेव और गेमिंग UI सौंदर्यशास्त्र नियॉन-ट्यूब लुक के लिए ग्रेडिएंट बॉर्डर को box-shadow के साथ जोड़ते हैं। बॉर्डर रंग संक्रमण प्रदान करता है, छाया खिलना प्रदान करती है। सामान्य पैटर्न: border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 प्लस box-shadow: 0 0 20px rgba(255,0,128,0.5) उसी तत्व पर।
• AI उत्पाद दृश्य पहचान।AI उपकरणों (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) की 2023-2024 लहर «AI सोच रहा है» या AI प्रसंस्करण की प्रतीक्षा में इनपुट फ़ील्ड के लिए दृश्य हस्ताक्षर के रूप में एनिमेटेड मल्टी-कलर ग्रेडिएंट बॉर्डर पर अभिसरित हुई। आमतौर पर 4 से 6 सेकंड के लूप पर घूमते हुए शंक्वाकार ग्रेडिएंट या बदलते रैखिक ग्रेडिएंट। आधुनिक UX में «बुद्धिमान / जनरेटिव» के लिए आशुलिपि बन जाता है।
• होवर और फ़ोकस स्थिति पॉलिश।बटन और इनपुट जो आराम की स्थिति में ठोस बॉर्डर से होवर या फ़ोकस पर ग्रेडिएंट बॉर्डर पर स्विच करते हैं वे प्रीमियम और जानबूझकर महसूस होते हैं। यदि ग्रेडिएंट दृश्य क्षेत्र से परे फैलता है (background-size: 200% 100% स्लाइड एनीमेशन के साथ) तो रंगों के बीच संक्रमण background-position पर CSS संक्रमणों के साथ एनिमेट कर सकता है।
• ब्रांड रंग अभिव्यक्ति।मल्टी-कलर लोगो (Instagram, Slack, Discord) के साथ ब्रांड सिस्टम अक्सर UI घटकों में अपनी पहचान का विस्तार करने के लिए ग्रेडिएंट बॉर्डर का उपयोग करते हैं। ब्रांड ग्रेडिएंट को अपने बॉर्डर के रूप में रखने वाला एक कार्ड लोगो के साथ दृश्य निरंतरता स्थापित करता है। SaaS मार्केटिंग पृष्ठों के लिए, यह एक सामान्य घटक को «ब्रांडेड» दिखाने के सबसे सस्ते तरीकों में से एक है।

सामान्य नुकसान और उनका क्या मतलब है

• border-image border-radius को अनदेखा करता है।सबसे आम भ्रम: border-image: linear-gradient(...) को border-radius के साथ उपयोग करने से वर्गाकार कोने उत्पन्न होते हैं। border-image बॉर्डर रेंडरिंग को पूरी तरह से अपने हाथ में ले लेता है और radius संपत्ति का चित्रित परिणाम पर कोई प्रभाव नहीं होता। गोल ग्रेडिएंट बॉर्डर पाने के लिए, छद्म-तत्व तकनीक या आधुनिक mask-composite दृष्टिकोण का उपयोग करें, border-image का नहीं।
• छद्म-तत्व तकनीक को padding-box की आवश्यकता है।मानक कार्यवस्था बाहरी तत्व पर background और ::before के माध्यम से एक आंतरिक ओवरले का उपयोग करती है। महत्वपूर्ण विवरण: आंतरिक ओवरले को padding किनारे पर रुकने के लिए background-clip: padding-box की आवश्यकता है, बॉर्डर क्षेत्र को दृश्यमान छोड़ते हुए। इस clip गुण को छोड़ने से ग्रेडिएंट पूरी तरह से ओवरले द्वारा कवर हो जाता है, कोई बॉर्डर दिखाई नहीं देता।
• ग्रेडिएंट बॉर्डर एनिमेट करना GPU-महंगा है।एनिमेटेड ग्रेडिएंट बॉर्डर («AI शिमर» पैटर्न) बड़े ग्रेडिएंट पर background-position को संक्रमण करके काम करते हैं। हालाँकि आधुनिक GPU इसे अच्छी तरह से संभालते हैं, इसे एक साथ कई तत्वों (जैसे, पृष्ठ पर हर कार्ड) पर लागू करना कम-अंत वाले डिवाइसों पर फ़्रेम दर को उल्लेखनीय रूप से गिरा देता है। एनिमेटेड ग्रेडिएंट बॉर्डर का उपयोग संयम से करें: प्रति पृष्ठ एक या दो «हीरो» तत्व, साइट-व्यापी नहीं।
• डार्क-मोड रंग संघर्ष।हल्के पृष्ठभूमि के लिए डिज़ाइन किया गया एक ग्रेडिएंट बॉर्डर अक्सर डार्क पृष्ठभूमि पर गलत दिखता है। शुद्ध सफेद ग्रेडिएंट अदृश्य हो जाते हैं; जीवंत रंग अति-संतृप्त दिखते हैं। दोहरे-थीम डिज़ाइन के लिए, CSS कस्टम गुणों या मीडिया क्वेरीज़ के माध्यम से हल्के और डार्क मोड के लिए अलग ग्रेडिएंट रंग स्टॉप परिभाषित करें। आसपास की थीम के साथ दृश्य सद्भाव बनाए रखने के लिए संतृप्ति कम करें और रंग समायोजित करें।
• कम-कंट्रास्ट बॉर्डर पहुँच में विफल होते हैं।सूक्ष्म ग्रेडिएंट बॉर्डर जो सुरुचिपूर्ण दिखते हैं वे राज्य व्यक्त करने वाले UI घटकों के लिए WCAG 2.1 SC 1.4.11 गैर-पाठ कंट्रास्ट (न्यूनतम 3:1) में विफल हो सकते हैं। यदि ग्रेडिएंट बॉर्डर बटन की सीमाओं या कार्ड की चयनयोग्यता का एकमात्र दृश्य संकेतक है, तो पृष्ठभूमि के साथ पर्याप्त कंट्रास्ट सुनिश्चित करें। पहले से दिखाई देने वाले तत्वों पर पूरी तरह से सजावटी बॉर्डर के लिए, कंट्रास्ट कम महत्वपूर्ण है लेकिन फिर भी जाँचने योग्य है।
• Internet Explorer और पुराना Edge कुछ भी उपयोगी समर्थन नहीं करते।IE 11 (जून 2022 में सेवानिवृत्त) और pre-Chromium Edge (2015 से 2019) ग्रेडिएंट के लिए विश्वसनीय border-image, mask-composite और कई छद्म-तत्व तकनीकों की कमी है। इन विरासत ब्राउज़रों के लिए, ग्रेडिएंट के मध्य रंग का उपयोग करके एक ठोस बॉर्डर पर सुंदर ढंग से वापस आएँ। आधुनिक ब्राउज़र 2026 में 99%+ उपयोगकर्ताओं को कवर करते हैं, लेकिन विरासत फ़ॉलबैक उद्यम सॉफ़्टवेयर के लिए महत्वपूर्ण रहते हैं।

गोपनीयता: सब कुछ आपके ब्राउज़र में चलता है

CSS जनरेटर उपकरण दो स्वादों में आते हैं: क्लाइंट-साइड JavaScript चलाने वाले सरल HTML पृष्ठ (निजी, तेज़) और क्लाउड संपादक जो आपकी परियोजनाओं को सहेजते हैं (सहयोगी लेकिन गोपनीयता ट्रेड-ऑफ के साथ)। यह उपकरण पहले प्रकार का है। आपके चयनित रंग, आपका कोण, आपका उत्पन्न CSS: सभी आपके ब्राउज़र सत्र में रहते हैं। पृष्ठ ताज़ा करें और स्थिति चली जाती है जब तक आपने पहले CSS कॉपी नहीं किया। कोई सर्वर आपके ग्रेडिएंट विकल्पों को संग्रहीत नहीं करता, कोई विश्लेषण ट्रैक नहीं करता कि आपने कौन से रंग संयोजन आज़माए, और कोई खाता आवश्यक नहीं है।

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

जब कोई दूसरा उपकरण सही विकल्प हो

• जटिल बॉर्डर आकृतियों के लिए SVG।गैर-आयताकार ग्रेडिएंट बॉर्डर (पायदान के साथ गोल, स्कैलप्ड किनारे, कस्टम अनियमित आकृतियाँ) के लिए, stroke गुण पर लागू linearGradient या radialGradient के साथ SVG पूर्ण नियंत्रण प्रदान करता है। CSS ग्रेडिएंट बॉर्डर आयतों और गोल आयतों के लिए काम करते हैं; SVG बाकी सब कुछ संभालता है। दोनों को एक साथ उपयोग करें: सजावटी आकृति की रूपरेखा के लिए SVG, मानक UI घटकों के लिए CSS।
• स्थिर ग्रेडिएंट छवियों के लिए Photoshop।यदि ग्रेडिएंट बॉर्डर एक स्थिर हीरो छवि या बैनर पर है जो बदलेगा नहीं, तो इसे Photoshop, Figma या Sketch में डिज़ाइन करना और PNG या WebP के रूप में निर्यात करना CSS बनाए रखने से सरल हो सकता है। छवि पृष्ठ संपत्ति पाइपलाइन के हिस्से के रूप में स्केल करती है। CSS ग्रेडिएंट बॉर्डर गतिशील तत्वों (कार्ड, बटन, घटक) के लिए हैं जिन्हें किसी भी आकार में रेंडर करने की आवश्यकता होती है।
• डिज़ाइन सिस्टम स्थिरता के लिए घटक पुस्तकालय।Tailwind UI, shadcn/ui, Radix और अन्य घटक पुस्तकालय वैकल्पिक ग्रेडिएंट बॉर्डर वेरिएंट के साथ पूर्व-शैलीबद्ध कार्ड और बटन घटक भेजते हैं। पहले से इन पुस्तकालयों का उपयोग करने वाली परियोजनाओं के लिए, पुस्तकालय का वेरिएंट लागू करना हाथ से CSS रोल करने से तेज़ है। हाथ से रोल किए गए ग्रेडिएंट बॉर्डर एक-बार के डिज़ाइन या घटक पुस्तकालय के लिए अभी तक प्रतिबद्ध नहीं परियोजनाओं के लिए उपयोगी हैं।
• एनिमेटेड बहु-परत प्रभावों के लिए Canvas या WebGL।अत्यधिक एनिमेटेड, बहु-परत ग्रेडिएंट प्रभावों (कण प्रणाली, द्रव सिमुलेशन, जनरेटिव कला) के लिए, Canvas 2D या WebGL प्रति-पिक्सेल नियंत्रण प्रदान करता है जिसे CSS मेल नहीं खा सकता। ट्रेड-ऑफ कार्यान्वयन जटिलता और पहुँच है (canvas सामग्री स्क्रीन रीडर के लिए अदृश्य है)। मानक UI घटकों पर सजावटी ग्रेडिएंट बॉर्डर के लिए, CSS सही विकल्प है; दृश्य प्रभावों के लिए, canvas-आधारित दृष्टिकोणों पर विचार करें।

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

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

हाँ। CSS linear-gradient() असीमित रंग स्टॉप स्वीकार करता है: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) मध्य में नारंगी से गुज़रता हुआ तीन-रंग का ग्रेडिएंट बनाता है। जितने स्टॉप चाहें जोड़ें, प्रत्येक वैकल्पिक स्थिति के साथ। जटिल मल्टी-कलर ग्रेडिएंट (इंद्रधनुष प्रभाव) के लिए, स्टॉप समान रूप से वितरित करें: 0%, 16.7%, 33.3%, 50%, 66.7%, 83.3%, 100%।

मैं इंद्रधनुष या शंक्वाकार ग्रेडिएंट बॉर्डर कैसे बनाऊँ?

शंक्वाकार (स्वीप) ग्रेडिएंट के लिए, छद्म-तत्व padding-box मास्किंग तकनीक के साथ बाहरी तत्व की पृष्ठभूमि के रूप में conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) का उपयोग करें। एक घूर्णन प्रभाव (AI उत्पाद लोडिंग स्थितियों में लोकप्रिय) के लिए, CSS Houdini के माध्यम से --angle एनिमेट करें या 360-डिग्री रोटेशन एनीमेशन के साथ @property --angle का उपयोग करें। परिणाम बॉर्डर के चारों ओर एक चिकनी रंग स्वीप है।

क्या मैं थीम-जागरूक ग्रेडिएंट बॉर्डर के लिए CSS कस्टम गुणों का उपयोग कर सकता हूँ?

हाँ, और यह डिज़ाइन सिस्टम के लिए अनुशंसित दृष्टिकोण है। ग्रेडिएंट रंगों को CSS कस्टम गुणों (--gradient-start, --gradient-end) के रूप में परिभाषित करें और उन्हें अपनी ग्रेडिएंट घोषणा में उपयोग करें: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end))। डार्क-मोड मीडिया क्वेरीज़ या थीम कक्षाओं में चर ओवरराइड करें। एक CSS फ़ाइल चर पुनर्परिभाषा के माध्यम से दोनों हल्के और डार्क थीम को संभालती है।

क्या यह Internet Explorer जैसे पुराने ब्राउज़रों में काम करता है?

Internet Explorer 11 (जून 2022 में Microsoft द्वारा आधिकारिक तौर पर सेवानिवृत्त) में आंशिक border-image समर्थन था लेकिन अविश्वसनीय ग्रेडिएंट रेंडरिंग, और कोई mask-composite नहीं। आधुनिक ब्राउज़र (Chrome 88+, Firefox 78+, Safari 14+) दोनों तकनीकों का पूरी तरह से समर्थन करते हैं। यदि आपको IE का समर्थन करना है, ग्रेडिएंट के मध्य रंग का उपयोग करते हुए एक ठोस-रंग फ़ॉलबैक प्रदान करें: ग्रेडिएंट नियम से पहले border: 3px solid #888; घोषित करें, और IE उसका उपयोग करेगा जबकि आधुनिक ब्राउज़र ग्रेडिएंट लागू करेंगे।

क्या ग्रेडिएंट बॉर्डर करने का कोई एकल-संपत्ति तरीका है?

मानकीकृत CSS में अभी तक नहीं। आधुनिक प्रस्ताव (CSS Backgrounds and Borders Module Level 4 ड्राफ्ट) में ग्रेडिएंट को सीधे स्वीकार करने वाला border-color गुण शामिल है, लेकिन ब्राउज़र कार्यान्वयन अभी स्थिर नहीं हैं। निकटतम वर्तमान सन्निकटन mask-composite तकनीक है जो एक एकल तत्व का उपयोग करती है लेकिन अभी भी तीन CSS घोषणाओं की आवश्यकता होती है। उम्मीद है कि 2027 या 2028 तक, border: 3px solid linear-gradient(...) बस काम करेगा।

मेरा ग्रेडिएंट बॉर्डर Safari में अलग क्यों दिखता है?

Safari ऐतिहासिक रूप से CSS फ़ीचर समानता में Chrome और Firefox से पिछड़ता है, विशेष रूप से mask-composite मानों और कुछ background-clip किनारे के मामलों के लिए। Safari में स्पष्ट रूप से परीक्षण करें। यदि छद्म-तत्व तकनीक Safari में विफल हो जाती है, border-image (जो सार्वभौमिक रूप से काम करता है लेकिन border-radius खो देता है) पर स्विच करें, या Safari-विशिष्ट उपसर्गों का उपयोग करें: पुराने Safari संस्करणों के लिए -webkit-mask-composite आवश्यक हो सकता है। iOS Safari को अक्सर 2024 संस्करणों में भी उपसर्ग की आवश्यकता होती है।