आसानी से सुंदर सीएसएस ग्रेडिएंट बनाएं

हमारे सहज ज्ञान युक्त अंतरफलक के साथ आश्चर्यजनक रैखिक, रेडियल और शंकु ग्रेडिएंट उत्पन्न करें। सीएसएस कोड कॉपी करें और इसे तुरंत अपनी परियोजनाओं में उपयोग करें।

Preview

उत्पन्न सीएसएस

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

ग्रेडिएंट नियंत्रण

135°
0%
100%

लोकप्रिय प्रीसेट

ग्रेडिएंट उदाहरण

इन आश्चर्यजनक ढाल उदाहरणों का अन्वेषण करें और अपनी अगली परियोजना के लिए प्रेरित हों। जनरेटर में लोड करने के लिए किसी भी ढाल पर क्लिक करें।

सूर्यास्त ब्लश

सुंदर सूर्यास्त से प्रेरित एक गर्म ढाल।

समुद्र की हवा

तटीय जल की भावना को उजागर करने वाला एक शांत ढाल।

मिंट फ्यूजन

टकसाल और आसमानी नीले रंग का संयोजन करने वाला एक ताजा और आधुनिक ढाल।

हरे-भरे बगीचे

प्रकृति की सुंदरता का प्रतिनिधित्व करने वाला एक जीवंत ढाल।

कॉस्मिक ड्रीम

रात के आकाश से प्रेरित एक जादुई ढाल।

गोल्डन घंटा

एक गर्म ढाल गोधूलि के सार को पकड़ती है।

ग्रेडिएंट डॉक्यूमेंटेशन

सीएसएस ग्रेडिएंट क्या हैं?

सीएसएस ग्रेडिएंट आपको दो या दो से अधिक रंगों के बीच चिकनी संक्रमण प्रदर्शित करने की अनुमति देता है। उन्हें तत्वों के लिए पृष्ठभूमि के रूप में उपयोग किया जा सकता है और तीन अलग-अलग प्रकारों में आते हैं:

  • रैखिक प्रवणता:एक सीधी रेखा के साथ संक्रमण रंग।
  • रेडियल ग्रेडिएंट:एक केंद्र बिंदु से बाहर की ओर संक्रमण रंग।
  • शंकु प्रवणता:एक सर्कल में एक केंद्र बिंदु के चारों ओर संक्रमण रंग।

ग्रेडिएंट का उपयोग कैसे करें

एक बार जब आप हमारे टूल का उपयोग करके ग्रेडिएंट जनरेट कर लेते हैं, तो आप अपनी परियोजनाओं में सीएसएस कोड का उपयोग कर सकते हैं:

  1. जनरेटर से सीएसएस कोड कॉपी करें।
  2. इसे अपनी CSS फ़ाइल में पेस्ट करें, या इसे अपने HTML तत्वों में इनलाइन उपयोग करें।
  3. का उपयोग करके किसी भी तत्व पर ग्रेडिएंट लागू करेंbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • अधिक जटिल ग्रेडिएंट प्रभाव के लिए दो से अधिक रंगों का उपयोग करें।
  • संक्रमण होने के स्थान को नियंत्रित करने के लिए रंग स्थितियों को समायोजित करें।
  • और भी अधिक रचनात्मक प्रभावों के लिए कई ग्रेडिएंट को मिलाएं।
  • शंकु ग्रेडिएंट के लिए, केंद्र को बदलने से दिलचस्प पैटर्न बनते हैं।
  • बाद में उपयोग के लिए अपने पसंदीदा ग्रेडिएंट सहेजें।

ब्राउज़र समर्थन

सीएसएस ग्रेडिएंट आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित हैं। हालाँकि, Internet Explorer जैसे पुराने ब्राउज़र उन्हें सही ढंग से रेंडर नहीं कर सकते हैं। हमेशा एक फ़ॉलबैक रंग प्रदान करें:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

इस उपकरण के बारे में

हमारे सीएसएस ग्रेडिएंट जेनरेटर को डेवलपर्स और डिजाइनरों को सहजता से सुंदर ग्रेडिएंट बनाने में मदद करने के लिए डिज़ाइन किया गया है। चाहे आप किसी वेबसाइट, एप्लिकेशन पर काम कर रहे हों, या केवल रंगों के साथ प्रयोग करना चाहते हों, यह टूल आपके प्रोजेक्ट के लिए सही ग्रेडिएंट उत्पन्न करना आसान बनाता है।

Features

प्रयोग करने में आसान

ग्रेडिएंट बनाने के लिए सहज ज्ञान युक्त इंटरफ़ेस।

प्रभावी डिजाइन

सभी स्क्रीन आकारों पर पूरी तरह से काम करता है।

कॉपी-पेस्ट तैयार

तुरंत साफ सीएसएस कोड प्राप्त करें।

प्रीसेट उपलब्ध हैं

सुंदर पूर्वनिर्धारित ग्रेडिएंट से शुरू करें।

Related Tools