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

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

यह जनरेटर तीन प्रकारों का समर्थन करता है: linear-gradient (एक सीधी रेखा में रंग), radial-gradient (केंद्र से विकिरण रंग), और conic-gradient (केंद्र बिंदु के चारों ओर घूमने वाले रंग)।

रैखिक ग्रेडिएंट एक कोण या दिशा कीवर्ड द्वारा परिभाषित सीधी रेखा में रंगों का संक्रमण करते हैं। रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर गोलाकार या अंडाकार आकार में रंगों का संक्रमण करते हैं।

आप आवश्यकतानुसार जितने रंग स्टॉप चाहें उपयोग कर सकते हैं। प्रत्येक स्टॉप एक रंग और वैकल्पिक रूप से ग्रेडिएंट लाइन पर एक स्थिति (0% से 100%) को परिभाषित करता है।

उत्पन्न CSS कोड कॉपी करें और इसे अपनी CSS स्टाइलशीट में background या background-image संपत्ति के मान के रूप में पेस्ट करें। कोड सभी आधुनिक ब्राउज़रों में काम करता है।

रंग स्टॉप ग्रेडिएंट लाइन पर विशिष्ट स्थितियों पर विशिष्ट रंगों को परिभाषित करते हैं। उदाहरण के लिए, "red 0%, blue 50%, green 100%" लाल से शुरू, नीले में संक्रमित और हरे पर समाप्त होने वाला ग्रेडिएंट बनाता है।

हां, रैखिक ग्रेडिएंट 0deg से 360deg तक के कोण मानों का समर्थन करते हैं। आप "to right", "to bottom", "to top left" जैसी दिशा कीवर्ड का भी उपयोग कर सकते हैं।

हां, CSS ग्रेडिएंट स्वाभाविक रूप से रिस्पॉन्सिव हैं क्योंकि वे वेक्टर-आधारित हैं और ब्राउज़र द्वारा प्रस्तुत किए जाते हैं। वे किसी भी कंटेनर आकार में बिना गुणवत्ता खोए पूरी तरह से स्केल होते हैं।

CSS ग्रेडिएंट आमतौर पर बहुत प्रदर्शनशील होते हैं। वे छवि फ़ाइलों के HTTP अनुरोधों को समाप्त करते हैं और हार्डवेयर-त्वरित होते हैं। हालांकि, अत्यंत जटिल ग्रेडिएंट निम्न-अंत उपकरणों पर प्रदर्शन को प्रभावित कर सकते हैं।

हां, ग्रेडिएंट को background-image, border-image, mask-image के लिए उपयोग किया जा सकता है और किसी भी संपत्ति में जो CSS छवि मान स्वीकार करती है।

Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़र CSS ग्रेडिएंट का समर्थन करते हैं। IE10 के बाद से समर्थन उत्कृष्ट रहा है।

मानक संस्करणों के बजाय repeating-linear-gradient या repeating-radial-gradient का उपयोग करें। ये पूरी तरह से तत्व को भरने के लिए ग्रेडिएंट पैटर्न को दोहराते हैं।

CSS ग्रेडिएंट को सीधे CSS ट्रांज़िशन से एनिमेट नहीं किया जा सकता। हालांकि, आप background-position, background-size को एनिमेट कर सकते हैं या @property के साथ CSS कस्टम प्रॉपर्टी का उपयोग कर सकते हैं।

हां, यह CSS ग्रेडिएंट जनरेटर पूरी तरह से मुफ्त है। कोई पंजीकरण आवश्यक नहीं, कोई उपयोग सीमा नहीं, और सभी उत्पन्न कोड आपका है।