CSS ग्रेडिएंट जनरेटर
पूर्वावलोकन के साथ सुंदर CSS ग्रेडिएंट बनाएँ
ग्रेडिएंट सेटिंग
रंग स्टॉप
रंग स्टॉप 1
रंग स्टॉप 2
प्रीसेट ग्रेडिएंट
ग्रेडिएंट के सुझाव
दिशा के साथ सहज रंग बदलाव के लिए लीनियर ग्रेडिएंट का उपयोग करें।
स्पॉटलाइट या फ़ोकस प्रभाव बनाने के लिए रेडियल ग्रेडिएंट अच्छे रहते हैं।
कोनिक ग्रेडिएंट कलर व्हील और कोणीय पैटर्न के लिए एकदम सही हैं।
ग्रेडिएंट में रंगों का वितरण नियंत्रित करने के लिए रंग स्टॉप की स्थितियाँ बदलें।
हल्के ग्रेडिएंट के लिए मिलते-जुलते रंग-रूप वाले रंग और गहरे प्रभाव के लिए विपरीत रंग चुनें।
लाइव प्रीव्यू
CSS शॉर्टहैंड
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS प्रॉपर्टी
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS क्लास
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}रंग और स्थितियाँ बदलें। काम करते समय प्रीव्यू अपडेट होता रहता है।
CSS ग्रेडिएंट जनरेटर के बारे में
हमारा मुफ़्त CSS ग्रेडिएंट जनरेटर किसी भी वेब प्रोजेक्ट के लिए सुंदर, सहज रंग संक्रमण बनाना आसान करता है। रंगों, स्थितियों, दिशाओं और कोणों पर पूरे नियंत्रण के साथ लीनियर ग्रेडिएंट, रेडियल ग्रेडिएंट और कोनिक ग्रेडिएंट बनाएँ, और साथ में रियल टाइम दृश्य प्रीव्यू पाएँ।
चाहे आपको हल्की दो-रंग की पृष्ठभूमि चाहिए या जटिल बहु-स्टॉप ग्रेडिएंट, यह टूल सटीक स्थिति नियंत्रण के साथ 10 तक कलर स्टॉप देता है। Sunset, Ocean, Forest और Purple Rain जैसे प्रीसेट टेम्पलेट में से चुनें, या अपने डिज़ाइनों के लिए अनोखे ग्रेडिएंट रंग संयोजन खोजने हेतु रैंडम जनरेटर का उपयोग करें।
जनरेटर तुरंत साफ़ CSS ग्रेडिएंट कोड बनाता है, जिसे आप एक क्लिक में कॉपी कर सकते हैं या PNG इमेज के रूप में डाउनलोड कर सकते हैं। background शॉर्टहैंड, background-image प्रॉपर्टी और उपयोग के लिए तैयार CSS क्लास सहित कई आउटपुट फ़ॉर्मैट मिलते हैं। सारी प्रोसेसिंग आपके ब्राउज़र में चलती है और किसी सर्वर पर अपलोड की आवश्यकता नहीं है।
मुख्य सुविधाएँ
- पूर्ण अनुकूलन के साथ लीनियर, रेडियल और कोनिक ग्रेडिएंट प्रकारों का समर्थन
- सटीक ग्रेडिएंट डिज़ाइन के लिए अलग-अलग स्थिति नियंत्रण वाले 10 तक कलर स्टॉप
- लीनियर ग्रेडिएंट के लिए 8 दिशात्मक प्रीसेट और कस्टम कोण इनपुट
- रेडियल ग्रेडिएंट का आकार (circle/ellipse) और स्थिति नियंत्रण
- कलर व्हील प्रभावों के लिए समायोज्य आरंभिक कोण वाला कोनिक ग्रेडिएंट
- 4 अंतर्निहित प्रीसेट ग्रेडिएंट: Sunset, Ocean, Forest और Purple Rain
- रचनात्मक प्रेरणा और खोज के लिए रैंडम ग्रेडिएंट जनरेटर
- सेटिंग बदलते ही तुरंत अपडेट होने वाला रियल टाइम प्रीव्यू
- कई CSS आउटपुट फ़ॉर्मैट (शॉर्टहैंड, प्रॉपर्टी, क्लास) के साथ एक-क्लिक कॉपी
- ग्रेडिएंट को उच्च-रिज़ॉल्यूशन PNG इमेज (800x600) के रूप में डाउनलोड करें
CSS ग्रेडिएंट जनरेटर का उपयोग कैसे करें
- ग्रेडिएंट प्रकार चुनें: अपनी ग्रेडिएंट शैली तय करने के लिए प्रकार चयनकर्ता से Linear, Radial या Conic चुनें।
- दिशा या स्थिति तय करें: लीनियर ग्रेडिएंट के लिए दिशा या कस्टम कोण चुनें। रेडियल के लिए आकार और स्थिति चुनें। कोनिक के लिए आरंभिक कोण समायोजित करें।
- रंग जोड़ें और समायोजित करें: अपने ग्रेडिएंट के रंग तय करने के लिए कलर पिकर का उपयोग करें और हर रंग कहाँ दिखे, यह नियंत्रित करने के लिए स्थिति मानों को खींचें।
- रियल टाइम में प्रीव्यू देखें: रंगों, स्थितियों और सेटिंग में बदलाव करते ही ग्रेडिएंट प्रीव्यू को तुरंत अपडेट होते देखें।
- CSS कोड कॉपी करें: अपने पसंदीदा फ़ॉर्मैट में CSS ग्रेडिएंट सिंटैक्स क्लिपबोर्ड पर कॉपी करने के लिए Copy बटन पर क्लिक करें।
- इमेज के रूप में डाउनलोड करें: डिज़ाइन टूल या प्रेज़ेंटेशन में उपयोग के लिए अपना ग्रेडिएंट PNG इमेज के रूप में सहेजने हेतु Download पर क्लिक करें।
उपयोग के मामले
- वेबसाइट पृष्ठभूमि: सहज रंग संक्रमण के साथ आकर्षक हीरो सेक्शन, हेडर और पूरे पेज की पृष्ठभूमि बनाएँ।
- बटन स्टाइलिंग: ऐसे ग्रेडिएंट बटन डिज़ाइन करें जो अलग दिखें और उपयोगकर्ताओं को कॉल टू एक्शन की ओर ले जाएँ।
- कार्ड और घटक एक्सेंट: UI कार्ड और घटकों में ग्रेडिएंट बॉर्डर, ओवरले या एक्सेंट रंग जोड़ें।
- टेक्स्ट प्रभाव: रंगीन ग्रेडिएंट टेक्स्ट प्रभाव बनाने के लिए background-clip के साथ CSS ग्रेडिएंट का उपयोग करें।
- लोडिंग संकेतक: स्केलेटन स्क्रीन और लोडिंग स्थितियों के लिए एनिमेटेड ग्रेडिएंट पृष्ठभूमि बनाएँ।
- सोशल मीडिया ग्राफ़िक्स: सोशल मीडिया पोस्ट, स्टोरी और कवर फ़ोटो के लिए ग्रेडिएंट इमेज डाउनलोड करें।
- डिज़ाइन सिस्टम रंग: अपने ब्रांड की डिज़ाइन भाषा के लिए एकसमान ग्रेडिएंट टोकन तय करें।
- प्रेज़ेंटेशन स्लाइड: वेब-आधारित प्रेज़ेंटेशन और पोर्टफ़ोलियो के लिए ग्रेडिएंट पृष्ठभूमि बनाएँ।
अक्सर पूछे जाने वाले प्रश्न
क्या यह टूल मुफ़्त है?
हाँ, CSS ग्रेडिएंट जनरेटर पूरी तरह मुफ़्त है। उपयोग की कोई सीमा नहीं है, डाउनलोड पर कोई वॉटरमार्क नहीं है और खाता पंजीकरण की आवश्यकता नहीं है।
क्या मेरा डेटा सुरक्षित है?
ग्रेडिएंट बनाना और इमेज रेंडर करना, सब कुछ सीधे आपके ब्राउज़र में होता है। कोई रंग डेटा, CSS कोड या इमेज किसी सर्वर पर अपलोड नहीं की जाती, इसलिए आपका काम पूरी तरह निजी रहता है।
लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या अंतर है?
लीनियर ग्रेडिएंट रंगों को एक सीधी रेखा में दी गई दिशा में बदलते हैं। रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर की ओर गोलाकार या अंडाकार आकार में फैलते हैं। कोनिक ग्रेडिएंट रंगों को कलर व्हील की तरह एक केंद्र बिंदु के चारों ओर घुमाते हैं।
एक ग्रेडिएंट में मैं कितने रंग इस्तेमाल कर सकता हूँ?
आप एक ग्रेडिएंट में 2 से 10 कलर स्टॉप इस्तेमाल कर सकते हैं। हर स्टॉप का अपना कलर पिकर और स्थिति स्लाइडर होता है, जिससे संक्रमण पर सटीक नियंत्रण मिलता है।
क्या CSS ग्रेडिएंट सभी ब्राउज़रों में समर्थित हैं?
लीनियर और रेडियल ग्रेडिएंट सभी आधुनिक ब्राउज़रों में समर्थित हैं। कोनिक ग्रेडिएंट भी Chrome, Firefox, Safari और Edge के मौजूदा संस्करणों में व्यापक रूप से समर्थित हैं।
सुझाव और सर्वोत्तम तरीके
- हल्के प्रभाव के लिए मिलते-जुलते रंग चुनें: कलर व्हील पर पास-पास के रंग सहज, सुरुचिपूर्ण और स्वाभाविक लगने वाले ग्रेडिएंट बनाते हैं।
- कलर स्टॉप सीमित रखें: दो से तीन रंग आमतौर पर सबसे साफ़ नतीजे देते हैं। ज़्यादा स्टॉप सावधानी से न रखे जाएँ तो संक्रमण धुँधले लग सकते हैं।
- फ़ॉलबैक रंग तय करें: उन ब्राउज़रों के लिए जो ग्रेडिएंट रेंडर न कर पाएँ, अपनी ग्रेडिएंट घोषणा से पहले हमेशा एक ठोस background-color रखें।
- स्पॉटलाइट प्रभाव के लिए रेडियल आज़माएँ: रेडियल ग्रेडिएंट किसी सेक्शन के केंद्र की ओर ध्यान खींचने या किसी मुख्य क्षेत्र को उभारने के लिए अच्छे रहते हैं।
- कई स्क्रीन पर जाँचें: अलग-अलग मॉनिटर और मोबाइल स्क्रीन पर ग्रेडिएंट अलग दिख सकते हैं, इसलिए हमेशा कई डिवाइस पर प्रीव्यू देखें।
- रैंडम जनरेटर का उपयोग करें: ऐसे अनपेक्षित रंग संयोजन खोजने के लिए Random पर क्लिक करें जिनके बारे में आपने शायद सोचा न हो।