CSS ग्रेडिएंट जनरेटर
विज़ुअली शानदार CSS ग्रेडिएंट बनाएं। कई रंग स्टॉप, कस्टम कोण और स्थितियों के साथ रैखिक, रेडियल और कोनिक ग्रेडिएंट उत्पन्न करें। तुरंत प्रोडक्शन-रेडी कोड कॉपी करें।
CSS ग्रेडिएंट क्या है?
CSS ग्रेडिएंट एक CSS छवि मान है जो छवि फ़ाइलों का उपयोग किए बिना दो या अधिक रंगों के बीच सुचारू संक्रमण प्रदर्शित करता है। ग्रेडिएंट ब्राउज़र द्वारा प्रस्तुत किए जाते हैं, जिससे वे रिज़ॉल्यूशन-स्वतंत्र और उच्च प्रदर्शनशील होते हैं।
CSS ग्रेडिएंट के कौन से प्रकार समर्थित हैं?
यह जनरेटर तीन प्रकारों का समर्थन करता है: linear-gradient (एक सीधी रेखा में रंग), radial-gradient (केंद्र से विकिरण रंग), और conic-gradient (केंद्र बिंदु के चारों ओर घूमने वाले रंग)।
रैखिक और रेडियल ग्रेडिएंट में क्या अंतर है?
रैखिक ग्रेडिएंट एक कोण या दिशा कीवर्ड द्वारा परिभाषित सीधी रेखा में रंगों का संक्रमण करते हैं। रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर गोलाकार या अंडाकार आकार में रंगों का संक्रमण करते हैं।
मैं कितने रंग स्टॉप का उपयोग कर सकता हूं?
आप आवश्यकतानुसार जितने रंग स्टॉप चाहें उपयोग कर सकते हैं। प्रत्येक स्टॉप एक रंग और वैकल्पिक रूप से ग्रेडिएंट लाइन पर एक स्थिति (0% से 100%) को परिभाषित करता है।
मैं उत्पन्न CSS कोड का उपयोग कैसे करूं?
उत्पन्न CSS कोड कॉपी करें और इसे अपनी CSS स्टाइलशीट में background या background-image संपत्ति के मान के रूप में पेस्ट करें। कोड सभी आधुनिक ब्राउज़रों में काम करता है।
ग्रेडिएंट में रंग स्टॉप क्या हैं?
रंग स्टॉप ग्रेडिएंट लाइन पर विशिष्ट स्थितियों पर विशिष्ट रंगों को परिभाषित करते हैं। उदाहरण के लिए, "red 0%, blue 50%, green 100%" लाल से शुरू, नीले में संक्रमित और हरे पर समाप्त होने वाला ग्रेडिएंट बनाता है।
क्या मैं कोण वाले ग्रेडिएंट बना सकता हूं?
हां, रैखिक ग्रेडिएंट 0deg से 360deg तक के कोण मानों का समर्थन करते हैं। आप "to right", "to bottom", "to top left" जैसी दिशा कीवर्ड का भी उपयोग कर सकते हैं।
क्या CSS ग्रेडिएंट रिस्पॉन्सिव हैं?
हां, CSS ग्रेडिएंट स्वाभाविक रूप से रिस्पॉन्सिव हैं क्योंकि वे वेक्टर-आधारित हैं और ब्राउज़र द्वारा प्रस्तुत किए जाते हैं। वे किसी भी कंटेनर आकार में बिना गुणवत्ता खोए पूरी तरह से स्केल होते हैं।
क्या CSS ग्रेडिएंट पृष्ठ प्रदर्शन को प्रभावित करते हैं?
CSS ग्रेडिएंट आमतौर पर बहुत प्रदर्शनशील होते हैं। वे छवि फ़ाइलों के HTTP अनुरोधों को समाप्त करते हैं और हार्डवेयर-त्वरित होते हैं। हालांकि, अत्यंत जटिल ग्रेडिएंट निम्न-अंत उपकरणों पर प्रदर्शन को प्रभावित कर सकते हैं।
क्या मैं पृष्ठभूमि और बॉर्डर में ग्रेडिएंट का उपयोग कर सकता हूं?
हां, ग्रेडिएंट को background-image, border-image, mask-image के लिए उपयोग किया जा सकता है और किसी भी संपत्ति में जो CSS छवि मान स्वीकार करती है।
कौन से ब्राउज़र CSS ग्रेडिएंट का समर्थन करते हैं?
Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़र CSS ग्रेडिएंट का समर्थन करते हैं। IE10 के बाद से समर्थन उत्कृष्ट रहा है।
मैं दोहराव वाला ग्रेडिएंट कैसे बनाऊं?
मानक संस्करणों के बजाय repeating-linear-gradient या repeating-radial-gradient का उपयोग करें। ये पूरी तरह से तत्व को भरने के लिए ग्रेडिएंट पैटर्न को दोहराते हैं।
क्या मैं CSS ग्रेडिएंट को एनिमेट कर सकता हूं?
CSS ग्रेडिएंट को सीधे CSS ट्रांज़िशन से एनिमेट नहीं किया जा सकता। हालांकि, आप background-position, background-size को एनिमेट कर सकते हैं या @property के साथ CSS कस्टम प्रॉपर्टी का उपयोग कर सकते हैं।
क्या यह ग्रेडिएंट जनरेटर मुफ्त है?
हां, यह CSS ग्रेडिएंट जनरेटर पूरी तरह से मुफ्त है। कोई पंजीकरण आवश्यक नहीं, कोई उपयोग सीमा नहीं, और सभी उत्पन्न कोड आपका है।
CSS ग्रेडिएंट जनरेटर का उपयोग कैसे करें
CSS ग्रेडिएंट आँखों से बनाएँ और प्रोडक्शन-रेडी कोड तुरंत कॉपी करें। रेंडरिंग ब्राउज़र में लोकल होती है, कुछ भी अपलोड नहीं होता।
- Type में ग्रेडिएंट चुनें: linear-gradient या radial-gradient।
- लीनियर ग्रेडिएंट के लिए Angle सेट करें, या रेडियल के लिए circle या ellipse जैसी Shape चुनें।
- Color Stops सेक्शन में कलर स्टॉप जोड़ें, रंग बदलें और उन्हें खींचकर पोज़िशन करें।
- Presets के नीचे कोई स्वैच क्लिक करें और तैयार मिश्रण से शुरुआत करें।
- बना हुआ CSS कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।
दो अलग रंगों के स्टॉप एक ही पोज़िशन पर रखने से हार्ड एज बनती है — बिना इमेज तुरंत स्ट्राइप बैकग्राउंड बनाने का आसान तरीका।
संबंधित टूल
- CSS बॉक्स शैडो जनरेटर मुफ्त ऑनलाइन CSS box-shadow जनरेटर। समायोज्य ऑफसेट, ब्लर, स्प्रेड, रंग और इनसेट के साथ विज़ुअली सुंदर छायाएं बनाएं। लाइव पूर्वावलोकन और तत्काल कोड कॉपी।
- CSS बॉर्डर रेडियस जनरेटर विज़ुअल CSS बॉर्डर रेडियस जनरेटर। प्रत्येक कोने को स्वतंत्र रूप से समायोजित करें, रियल-टाइम प्रीव्यू देखें और CSS कोड तुरंत कॉपी करें।
- CSS Grid जनरेटर लाइव पूर्वावलोकन के साथ मुफ्त विज़ुअल CSS Grid जनरेटर। इंटरैक्टिव रूप से रिस्पॉन्सिव ग्रिड लेआउट डिज़ाइन करें और प्रोडक्शन-रेडी CSS कोड तुरंत निर्यात करें।
- CSS Flexbox जनरेटर लाइव पूर्वावलोकन के साथ विज़ुअल CSS Flexbox जनरेटर। Flex गुणों को समायोजित करें और तुरंत उपयोगी CSS कोड प्राप्त करें।
- बॉर्डर रेडियस जेनरेटर मुफ्त ऑनलाइन बॉर्डर रेडियस जेनरेटर। 8 हैंडल खींचें या ब्लॉब प्रीसेट चुनें, जैविक CSS आकार बनाएं और कोड तुरंत कॉपी करें।
- रंग परिवर्तक मुफ्त ऑनलाइन रंग परिवर्तक। विज़ुअल पिकर के साथ HEX, RGB, HSL, HSV प्रारूपों को तुरंत बदलें। 100% निजी, आपके ब्राउज़र में चलता है।
- CSS ईज़िंग जनरेटर मुफ़्त ऑनलाइन CSS ईज़िंग जनरेटर। इंटरैक्टिव कर्व पर cubic-bezier कंट्रोल पॉइंट खींचें, 18 प्रीसेट में से चुनें, लूपिंग बॉल प्रीव्यू देखें और टाइमिंग फंक्शन तुरंत कॉपी करें।
- CSS टेक्स्ट शैडो जनरेटर मुफ़्त ऑनलाइन text-shadow जनरेटर। ऑफसेट, ब्लर, रंग और अस्पष्टता के साथ कई शैडो लेयर स्टैक करें, नियॉन, 3D, रेट्रो प्रीसेट आज़माएँ और CSS तुरंत कॉपी करें।