Browse categories

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

अपने ब्राउज़र में पूरी तरह से ब्राउज़र-सेफ CSS ग्रेडिएंट बनाएं।

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

इसका इस्तेमाल कैसे करें generator

  1. लीनियर या रेडियल मोड चुनें, हर कलर स्टॉप पर प्रीसेट लगाएं या एडिट करें, फिर जहां लागू हो वहां पोजीशन और एंगल एडजस्ट करें।
  2. लाइव रिज़ल्ट को रिव्यू करें और जब आपको इसे शेयर करने की ज़रूरत हो तो कॉपी रिज़ल्ट का इस्तेमाल करें।

कैसे generator works

लाइव प्रीव्यू और स्टॉप कंट्रोल एक स्टैंडर्ड अनप्रीफिक्स्ड CSS बैकग्राउंड डिक्लेरेशन बनाते हैं जिसे कॉपी या डाउनलोड किया जा सकता है।

स्टेप-बाय-स्टेप generation

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

वर्क किया हुआ उदाहरण

एक 135-डिग्री लीनियर ग्रेडिएंट कई जगह लगे कलर स्टॉप को मिला सकता है, जैसे नीला 0% पर, हरा 50% पर और पीला 100% पर।

रिस्क गाइडेंस

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

क्या यह टूल मेरे इनपुट कहीं भेजता है?

नहीं। इंटरैक्टिव कैलकुलेशन आपके ब्राउज़र में चलता है और यह साइट किसी बैकएंड पर टूल इनपुट सबमिट नहीं करती है।

मुझे रिज़ल्ट का इस्तेमाल कैसे करना चाहिए?

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

संबंधित टूल