CSS ग्रेडिएंट जनरेटर
लाइव प्रीव्यू के साथ सुंदर लीनियर, रेडियल और कॉनिक CSS ग्रेडिएंट डिज़ाइन करें और एक क्लिक में कोड कॉपी करें
लाइव प्रीव्यू
ग्रेडिएंट प्रकार
कलर स्टॉप
प्रीसेट
CSS कोड
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);सब कुछ आपके ब्राउज़र में स्थानीय रूप से बनाया जाता है। सर्वर पर कुछ नहीं भेजा जाता।
इस टूल के बारे में
यह CSS ग्रेडिएंट जनरेटर आपको चिकने रंग मिश्रण को दृश्यात्मक रूप से डिज़ाइन करने और एक क्लिक में चिपकाने-योग्य CSS कॉपी करने देता है। लीनियर, रेडियल या कॉनिक ग्रेडिएंट चुनें, जितने चाहें उतने कलर स्टॉप जोड़ें, और प्रत्येक स्टॉप का रंग नेटिव कलर पिकर या HEX फ़ील्ड के साथ-साथ 0 से 100 प्रतिशत की स्थिति से ठीक करें। लीनियर ग्रेडिएंट के लिए आप 0 से 360 डिग्री का कोई भी कोण सेट कर सकते हैं या त्वरित दिशा बटन उपयोग कर सकते हैं; रेडियल ग्रेडिएंट वृत्त या दीर्घवृत्त आकार का समर्थन करते हैं, और कॉनिक ग्रेडिएंट एक केंद्र बिंदु के चारों ओर रंगों को घुमाते हैं। एक बड़ा लाइव प्रीव्यू तुरंत अपडेट होता है ताकि आप ठीक वही देखें जो आप बना रहे हैं। चुनिंदा प्रीसेट में से किसी एक से शुरुआत करें, नए विचारों के लिए रैंडम बटन दबाएं, फिर बनाई गई background प्रॉपर्टी को अपनी स्टाइलशीट में कॉपी करें। सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है, इसलिए यह तेज़, निजी है और ऑफ़लाइन भी काम करता है।
इसका उपयोग कैसे करें
- 1 एक ग्रेडिएंट प्रकार चुनें — लीनियर, रेडियल या कॉनिक।
- 2 कलर स्टॉप जोड़ें, फिर प्रत्येक स्टॉप का रंग (पिकर या HEX) और उसकी 0 से 100% स्थिति सेट करें।
- 3 लीनियर और कॉनिक ग्रेडिएंट के लिए कोण, या रेडियल के लिए आकार समायोजित करें — या कोई प्रीसेट लोड करें।
- 4 लाइव प्रीव्यू देखें, फिर अपने प्रोजेक्ट में background प्रॉपर्टी चिपकाने के लिए CSS कॉपी करें पर क्लिक करें।
यह कैसे काम करता है
यह टूल आपकी सेटिंग्स से एक मानक CSS ग्रेडिएंट फ़ंक्शन तैयार करता है। लीनियर ग्रेडिएंट linear-gradient(कोण, स्टॉप) का उपयोग करते हैं, जहां कोण ग्रेडिएंट रेखा को दिशा देता है और प्रत्येक कलर स्टॉप एक रंग के बाद प्रतिशत स्थिति के रूप में लिखा जाता है। रेडियल ग्रेडिएंट radial-gradient(आकार at center, स्टॉप) का उपयोग करके रंगों को बीच से बाहर की ओर फैलाते हैं, और कॉनिक ग्रेडिएंट conic-gradient(from कोण at center, स्टॉप) का उपयोग करके रंगों को एक बिंदु के चारों ओर घुमाते हैं। आउटपुट से पहले कलर स्टॉप स्थिति के अनुसार स्वतः क्रमबद्ध हो जाते हैं, इसलिए उन्हें जोड़ने का क्रम मायने नहीं रखता। स्थितियां 0-100% तक सीमित हैं और हमेशा कम से कम दो स्टॉप बने रहते हैं, इसलिए बना हुआ CSS हमेशा मान्य रहता है। परिणाम एक सादा background घोषणा है जिसे आप बिना प्रीफ़िक्स के किसी भी आधुनिक ब्राउज़र में उपयोग कर सकते हैं।
अक्सर पूछे जाने वाले प्रश्न
लीनियर, रेडियल और कॉनिक ग्रेडिएंट में क्या अंतर है?
लीनियर ग्रेडिएंट एक सीधी रेखा के साथ रंगों को मिलाता है जिसकी दिशा आप कोण से तय करते हैं। रेडियल ग्रेडिएंट एक केंद्र बिंदु से वृत्त या दीर्घवृत्त में बाहर की ओर रंग फैलाता है। कॉनिक ग्रेडिएंट एक केंद्र बिंदु के चारों ओर रंगों को घुमाता है, जो पाई चार्ट, कलर व्हील और कोणीय प्रभावों के लिए उपयोगी है। तीनों नेटिव CSS हैं और हर आधुनिक ब्राउज़र में समर्थित हैं।
मैं कितने कलर स्टॉप जोड़ सकता हूं?
आप ज़रूरत के अनुसार जितने चाहें उतने कलर स्टॉप जोड़ सकते हैं; टूल हमेशा कम से कम दो बनाए रखता है ताकि ग्रेडिएंट मान्य रहे। प्रत्येक स्टॉप का अपना रंग और 0 से 100 प्रतिशत की स्थिति होती है। अधिक स्टॉप जोड़ने से आप इंद्रधनुष, बहु-रंगीन पृष्ठभूमि और चिकने बहु-रंग संक्रमण बना सकते हैं।
कोण नियंत्रण क्या करता है?
लीनियर ग्रेडिएंट के लिए कोण रंग रेखा की दिशा तय करता है: 0 डिग्री ऊपर, 90 दाएं, 180 नीचे और 270 बाएं इंगित करता है, ताकि आप मिश्रण को कहीं भी निर्देशित कर सकें। कॉनिक ग्रेडिएंट के लिए कोण स्वीप के घूर्णन की शुरुआत तय करता है। आप स्लाइडर खींच सकते हैं, सटीक मान टाइप कर सकते हैं, या त्वरित दिशा बटन उपयोग कर सकते हैं।
क्या बना हुआ CSS प्रोडक्शन में उपयोग के लिए तैयार है?
हां। आउटपुट एक मानक background प्रॉपर्टी है जो नेटिव ग्रेडिएंट फ़ंक्शन का उपयोग करती है जो सभी वर्तमान ब्राउज़रों में बिना वेंडर प्रीफ़िक्स के काम करते हैं। बस लाइन कॉपी करें और इसे अपनी स्टाइलशीट, इनलाइन स्टाइल या कंपोनेंट में चिपकाएं। यदि आप अलग पृष्ठभूमि रंग रखना चाहते हैं तो प्रॉपर्टी का नाम background-image में बदल सकते हैं।
क्या मेरा डेटा कहीं भेजा जाता है?
नहीं। पूरा जनरेटर JavaScript और CSS का उपयोग करके आपके ब्राउज़र में चलता है। आपके रंगों या ग्रेडिएंट के बारे में कुछ भी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता, इसलिए टूल निजी है और इंटरनेट से डिस्कनेक्ट करने पर भी काम करता रहता है।
संबंधित टूल और उपयोग
सटीक HEX, RGB और HSL मान चुनने के लिए ग्रेडिएंट जनरेटर को कलर कन्वर्टर के साथ, और यह सुनिश्चित करने के लिए कि टेक्स्ट आपके ग्रेडिएंट पर पढ़ने योग्य रहे, कंट्रास्ट चेकर के साथ जोड़ें। डिज़ाइनर और डेवलपर इसका उपयोग वेबसाइटों और ऐप्स के लिए हीरो पृष्ठभूमि, बटन, कार्ड, बैज और सजावटी प्रभाव बनाने के लिए करते हैं।