मुख्य सामग्री पर जाएं
patrache.tools

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

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

प्रकार
कोण
90°
रंग
0%
100%
CSS कोड
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockफ़ाइलें सर्वर पर नहीं भेजी जातीं
शेयर करें
एम्बेड

इस टूल को अपनी साइट पर एम्बेड करें

मुफ़्त ऑनलाइन CSS ग्रेडिएंट जनरेटर। linear, radial और conic ग्रेडिएंट को दृश्यात्मक रूप से डिज़ाइन करें, फिर CSS कोड तुरंत कॉपी करें।

ग्रेडिएंट जनरेटर कैसे इस्तेमाल करें?

  1. ग्रेडिएंट प्रकार चुनें (linear, radial आदि)।
  2. कलर स्टॉप जोड़ें और रंग सेट करें।
  3. बनाए गए CSS कोड को कॉपी करें।

ग्रेडिएंट जनरेटर के बारे में अक्सर पूछे जाने वाले सवाल

कौन-कौन से ग्रेडिएंट प्रकार समर्थित हैं?

linear, radial और conic ग्रेडिएंट समर्थित हैं।

क्या मैं CSS कोड सीधे कॉपी कर सकता हूँ?

हाँ, अपनी वेबसाइट पर सीधे लागू करने के लिए बनाए गए CSS ग्रेडिएंट कोड को एक क्लिक से कॉपी करें।

मेरे ग्रेडिएंट के बीच में मटमैली धूसर पट्टी क्यों आ जाती है?

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

क्या ग्रेडिएंट को सिर्फ़ CSS नहीं, तस्वीर फ़ाइल के रूप में भी सहेजा जा सकता है?

हाँ, आप PNG डाउनलोड करके उसे सीधे स्लाइड की पृष्ठभूमि, सोशल मीडिया की तस्वीर या छपाई के लेआउट में इस्तेमाल कर सकते हैं। पर वेब पेज के लिए CSS ही बेहतर विकल्प है: कोई फ़ाइल डाउनलोड नहीं करनी पड़ती, ग्रेडिएंट हर स्क्रीन आकार तक बिना टूटे फैलता है, और बड़ा करने पर बिटमैप जैसी सीढ़ीनुमा किनार भी नहीं आती।

ग्रेडिएंट जनरेटर को प्रभावी ढंग से कैसे इस्तेमाल करें?

  • कलर व्हील में पास-पास के दो रंग मिलाएँ; दूर के रंग बीच में गंदा ग्रे बना देते हैं।
  • बैनर और कार्ड बैकग्राउंड के लिए 135 डिग्री का डायगोनल ग्रेडिएंट सबसे सुरक्षित रहता है।
  • ऊपर टेक्स्ट आना है तो सबसे हल्के कलर स्टॉप के साथ कंट्रास्ट जाँचें।

Powered by Patrache Studio Tools

कृपया इस साइट पर विज्ञापनों की अनुमति दें

इन टूल का उपयोग करने के लिए इस साइट पर विज्ञापनों की अनुमति दें। विज्ञापनों से यह सेवा मुफ़्त रहती है।

विज्ञापन अवरोधक खोलें, इस साइट के लिए उसे बंद करें और फिर जाँचें।