ToolsMaxxing

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

लीनियर, रेडियल या कोनिक ग्रेडिएंट डिज़ाइन करें और CSS कॉपी करें।

कलर स्टॉप
0%
100%

आपकी फ़ाइलें आपके डिवाइस पर ही रहती हैं

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

  1. 1लीनियर, रेडियल या कोनिक चुनें।
  2. 2एंगल सेट करें, या रेडियल के लिए आकार।
  3. 3रंग चुनें और हर स्टॉप को उसकी जगह पर खींचें। कलर स्टॉप जोड़ें से नए स्टॉप जोड़ें।
  4. 4CSS कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।

विकल्पों का मतलब

लीनियर
रंग एक सीधी रेखा में घुलते हैं। एंगल दिशा तय करता है: 0 डिग्री ऊपर, 90 दाएँ, 180 नीचे जाता है।
रेडियल
रंग केंद्र से बाहर फैलते हैं, गोले या अंडाकार के रूप में।
कोनिक
रंग केंद्र के चारों ओर कलर व्हील या पाई चार्ट की तरह घूमते हैं। एंगल शुरुआत को घुमाता है।
कलर स्टॉप
हर स्टॉप 0 से 100 प्रतिशत की किसी जगह पर एक रंग है। आठ तक।

प्राइवेसी

सब कुछ आपके ब्राउज़र में चलता है। आप जो टाइप करते हैं वह किसी सर्वर पर नहीं भेजा जाता।

लोग अक्सर पूछते हैं

कौन से ब्राउज़र इन ग्रेडिएंट को सपोर्ट करते हैं?

लीनियर और रेडियल ग्रेडिएंट हर मौजूदा ब्राउज़र में चलते हैं। कोनिक ग्रेडिएंट Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्शन में चलते हैं।

घुलने की जगह तीखा किनारा कैसे बनाऊँ?

दो स्टॉप एक ही जगह रखें, जैसे लाल 50% पर और नीला 50% पर। उनके बीच घुलने की दूरी नहीं रहती, इसलिए बदलाव तीखा होता है।

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

हाँ। वही मान background-image में इस्तेमाल करें, टेक्स्ट के लिए background-clip: text के साथ, और बॉर्डर के लिए border-image के साथ।

पेज पर मेरे चुने से अलग रंग क्यों दिखता है?

कलर पिकर sRGB hex मान इस्तेमाल करता है। चौड़ी रंग सीमा वाली स्क्रीन उन्हें थोड़ा अलग दिखा सकती हैं, पर CSS के मान सटीक हैं।

पारदर्शिता कैसे जोड़ूँ?

यह टूल ठोस hex रंग देता है। कोड बदलें और किसी रंग को #4f46e580 जैसे आठ अंकों के hex या rgba() से बदल दें।

मिलते-जुलते टूल्स