Preview
उत्पन्न सीएसएस
ग्रेडिएंट नियंत्रण
लोकप्रिय प्रीसेट
ग्रेडिएंट उदाहरण
इन आश्चर्यजनक ढाल उदाहरणों का अन्वेषण करें और अपनी अगली परियोजना के लिए प्रेरित हों। जनरेटर में लोड करने के लिए किसी भी ढाल पर क्लिक करें।
सूर्यास्त ब्लश
सुंदर सूर्यास्त से प्रेरित एक गर्म ढाल।
समुद्र की हवा
तटीय जल की भावना को उजागर करने वाला एक शांत ढाल।
मिंट फ्यूजन
टकसाल और आसमानी नीले रंग का संयोजन करने वाला एक ताजा और आधुनिक ढाल।
हरे-भरे बगीचे
प्रकृति की सुंदरता का प्रतिनिधित्व करने वाला एक जीवंत ढाल।
कॉस्मिक ड्रीम
रात के आकाश से प्रेरित एक जादुई ढाल।
गोल्डन घंटा
एक गर्म ढाल गोधूलि के सार को पकड़ती है।
ग्रेडिएंट डॉक्यूमेंटेशन
सीएसएस ग्रेडिएंट क्या हैं?
सीएसएस ग्रेडिएंट आपको दो या दो से अधिक रंगों के बीच चिकनी संक्रमण प्रदर्शित करने की अनुमति देता है। उन्हें तत्वों के लिए पृष्ठभूमि के रूप में उपयोग किया जा सकता है और तीन अलग-अलग प्रकारों में आते हैं:
- रैखिक प्रवणता:एक सीधी रेखा के साथ संक्रमण रंग।
- रेडियल ग्रेडिएंट:एक केंद्र बिंदु से बाहर की ओर संक्रमण रंग।
- शंकु प्रवणता:एक सर्कल में एक केंद्र बिंदु के चारों ओर संक्रमण रंग।
ग्रेडिएंट का उपयोग कैसे करें
एक बार जब आप हमारे टूल का उपयोग करके ग्रेडिएंट जनरेट कर लेते हैं, तो आप अपनी परियोजनाओं में सीएसएस कोड का उपयोग कर सकते हैं:
- जनरेटर से सीएसएस कोड कॉपी करें।
- इसे अपनी CSS फ़ाइल में पेस्ट करें, या इसे अपने HTML तत्वों में इनलाइन उपयोग करें।
- का उपयोग करके किसी भी तत्व पर ग्रेडिएंट लागू करें
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- अधिक जटिल ग्रेडिएंट प्रभाव के लिए दो से अधिक रंगों का उपयोग करें।
- संक्रमण होने के स्थान को नियंत्रित करने के लिए रंग स्थितियों को समायोजित करें।
- और भी अधिक रचनात्मक प्रभावों के लिए कई ग्रेडिएंट को मिलाएं।
- शंकु ग्रेडिएंट के लिए, केंद्र को बदलने से दिलचस्प पैटर्न बनते हैं।
- बाद में उपयोग के लिए अपने पसंदीदा ग्रेडिएंट सहेजें।
ब्राउज़र समर्थन
सीएसएस ग्रेडिएंट आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित हैं। हालाँकि, Internet Explorer जैसे पुराने ब्राउज़र उन्हें सही ढंग से रेंडर नहीं कर सकते हैं। हमेशा एक फ़ॉलबैक रंग प्रदान करें:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
इस उपकरण के बारे में
हमारे सीएसएस ग्रेडिएंट जेनरेटर को डेवलपर्स और डिजाइनरों को सहजता से सुंदर ग्रेडिएंट बनाने में मदद करने के लिए डिज़ाइन किया गया है। चाहे आप किसी वेबसाइट, एप्लिकेशन पर काम कर रहे हों, या केवल रंगों के साथ प्रयोग करना चाहते हों, यह टूल आपके प्रोजेक्ट के लिए सही ग्रेडिएंट उत्पन्न करना आसान बनाता है।
Features
प्रयोग करने में आसान
ग्रेडिएंट बनाने के लिए सहज ज्ञान युक्त इंटरफ़ेस।
प्रभावी डिजाइन
सभी स्क्रीन आकारों पर पूरी तरह से काम करता है।
कॉपी-पेस्ट तैयार
तुरंत साफ सीएसएस कोड प्राप्त करें।
प्रीसेट उपलब्ध हैं
सुंदर पूर्वनिर्धारित ग्रेडिएंट से शुरू करें।
Related Tools
उत्पन्न CSS3 आसानी से बदलता है
जटिल CSS3 बनाने के लिए एक शक्तिशाली, सहज ज्ञान युक्त उपकरण कोड लिखे बिना बदल जाता है। वास्तविक समय में परिवर्तनों की कल्पना करें और अपनी परियोजनाओं में उपयोग करने के लिए उत्पन्न सीएसएस की प्रतिलिपि बनाएं।
CSS3 संक्रमण जेनरेटर
चिकनी अस्पष्टता संक्रमण
सीएसएस से कम कनवर्टर
अपने CSS कोड को चर, नेस्टिंग और अधिक के साथ LESS में बदलें। तेज़, आसान और सुरक्षित।
SHA-224 हॅश कॅल्क्युलेटर
जल्दी और आसानी से SHA-224 हैश जनरेट करें
स्पष्ट शक्ति परिवर्तक
विभिन्न इकाइयों के बीच स्पष्ट शक्ति को सटीकता और आसानी से परिवर्तित करें
Generate dummy text for your designs
हमारे Lorem Ipsum जनरेटर के साथ अपनी वेबसाइटों, ऐप्स और दस्तावेज़ों के लिए यथार्थवादी प्लेसहोल्डर टेक्स्ट बनाएं।