होम पर वापस जाएं

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

रंग, दिशा, स्टॉप और टेक्स्ट कॉन्ट्रास्ट को देखकर सुंदर linear, radial या conic ग्रेडिएंट बनाएं और साफ CSS कॉपी करें।

श्रेणियां परिणाम की प्रतीक्षा है
समस्या बताएं

डिजाइन सहायकAA मानक

लाइव प्रीव्यू

ग्रेडिएंट पर साफ दिखाई देने वाला टेक्स्ट

ग्रेडिएंट सेटिंग

रंग स्टॉप

पढ़ने की सुविधा

कॉन्ट्रास्ट

4.58 : 1

टेक्स्ट रंग

#ffffff

प्रकाशन से पहले मोबाइल चौड़ाई पर भी जांचें।

कॉपी के लिए तैयार कोड

CSS background

background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);

इनलाइन शैली

style="background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);"

बेहतर उपयोग के सुझाव

done

टेक्स्ट और पृष्ठभूमि में पर्याप्त कॉन्ट्रास्ट रखें।

done

उत्पादन UI में जरूरत न हो तो बहुत अधिक रंग स्टॉप न रखें।

done

फॉर्म और डैशबोर्ड के पीछे हल्के ग्रेडिएंट का प्रयोग करें।

done

प्रकाशन से पहले मोबाइल चौड़ाई पर भी जांचें।

ध्यान देने योग्य बातें

गणना मानक सूत्रों पर आधारित है। प्रदर्शित मान पढ़ने में आसानी के लिए राउंड किए जा सकते हैं। महत्वपूर्ण निर्णय के लिए आधिकारिक स्रोत भी जांचें।

परिणाम कार्यक्षेत्र

इस परिणाम को सहेजें, पुराने परिणामों से तुलना करें या रिपोर्ट साझा करें।

अच्छा CSS ग्रेडिएंट कैसे बनता है

दिशा, रंग स्टॉप की दूरी, टेक्स्ट कॉन्ट्रास्ट और ऊपर रखा कंटेंट तय करते हैं कि ग्रेडिएंट संतुलित दिखेगा या बहुत व्यस्त।

ध्यान देने योग्य बातें

  • Linear gradient में कोण और क्रमबद्ध रंग स्टॉप होते हैं।
  • Radial gradient में आकार, केंद्र और रंग स्टॉप होते हैं।
  • Conic gradient केंद्र के चारों ओर रंग घुमाता है।
  • प्रीव्यू और कॉपी किया गया कोड एक ही background मान उपयोग करते हैं।

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

क्या दो से अधिक रंग रख सकते हैं?expand_more

हां। छह तक रंग स्टॉप जोड़कर उनकी स्थिति बदल सकते हैं।

टेक्स्ट साफ क्यों नहीं दिख रहा?expand_more

पृष्ठभूमि और टेक्स्ट का कॉन्ट्रास्ट कम हो सकता है। कॉन्ट्रास्ट परिणाम देखकर टेक्स्ट रंग बदलें।

क्या कोड Vue, React या Tailwind में चलेगा?expand_more

हां। तैयार CSS background या इनलाइन style को किसी भी वेब फ्रेमवर्क में उपयोग किया जा सकता है।