Toolyard

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

रंग

प्रीसेट

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

  1. प्रकार चुनें: लीनियर आपके तय कोण पर सीधी रेखा में चलता है, रेडियल बीच से गोलाई में फैलता है, और कोनिक आपके तय कोण से बीच के चारों ओर घूमता है।
  2. हर रंग बदलें और उसका स्लाइडर खिसकाकर 0% से 100% के बीच उसकी जगह तय करें। “रंग जोड़ें” सबसे चौड़े खाली हिस्से में नया रंग डालता है, छह तक; ✕ एक हटाता है।
  3. या किसी प्रीसेट से शुरू करने के लिए उसे दबाएँ। प्रीव्यू तुरंत बदलता है; “CSS कॉपी करें” पंक्तियाँ कॉपी करता है ताकि आप उन्हें अपनी स्टाइलशीट में चिपका सकें।

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

background की दो पंक्तियाँ क्यों हैं?

पहली सादा रंग है, उस दुर्लभ ब्राउज़र के लिए जो ग्रेडिएंट नहीं बना पाता; बाकी सब जगह दूसरी पंक्ति उसकी जगह लेती है।

कोण का क्या मतलब है?

लीनियर ग्रेडिएंट में 0deg नीचे से ऊपर, 90deg बाएँ से दाएँ और 180deg ऊपर से नीचे चलता है। कोनिक में यह वह जगह है जहाँ पहला रंग शुरू होता है, ऊपर से घड़ी की दिशा में।

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

हाँ। टेक्स्ट के लिए इसे बैकग्राउंड बनाएँ और background-clip: text व color: transparent जोड़ें। बॉर्डर के लिए इसे border-image में border-image-slice: 1 के साथ लगाएँ।

और डेवलपर टूल