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 तकनीक लागू करें या फ़ील्ड को एक ग्रेडिएंट कंटेनर में लपेटें।