डेवलपर / CSS

CSS ग्रेडिएंट जनरेटर

लाइव प्रीव्यू, अपनी ज़रूरत के अनुसार कई कलर स्टॉप और प्रीसेट के साथ linear, radial या conic ग्रेडिएंट डिज़ाइन करें, फिर CSS कॉपी करें।

CSS ग्रेडिएंट जनरेटर: यह जनरेटर आपके देखे गए ग्रेडिएंट के लिए ब्राउज़र को आवश्यक background डिक्लेरेशन लिखता है: एंगल के साथ linear-gradient, बीच से circle या ellipse वाला radial-gradient, या शुरुआती एंगल से चारों ओर घूमता conic-gradient—इन सभी में कलर स्टॉप क्रम से होते हैं। ग्रेडिएंट बनाने में असमर्थ बहुत पुराने ब्राउज़र के लिए पहली लाइन में fallback के रूप में एक ठोस रंग पहले आता है। नया रंग सबसे बड़े अंतराल में जोड़ा जाता है और उसके पड़ोसी रंगों से मिलाया जाता है, ताकि ग्रेडिएंट में अचानक बदलाव न आए। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
CSS ग्रेडिएंट जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

रंग स्टॉप
#ff7e5f0%
#feb47b100%

CSS

background: #ff7e5f;
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

पहली लाइन बहुत पुराने ब्राउज़र के लिए ठोस रंग है; हर मौजूदा ब्राउज़र दूसरी लाइन के ग्रेडिएंट का उपयोग करता है।

प्रीसेट्स

स्मूद दिखने वाले ग्रेडिएंट

नीले से पीले जैसे बहुत अलग रंगों के बीच का मिश्रण बीच में फीके स्लेटी रंग से होकर गुजरता है। बीच में किसी चमकीले रंग का 1 स्टॉप जोड़ने से ग्रेडिएंट जीवंत बना रहता है। नारंगी से गुलाबी जैसे पास-पास के रंगों के ग्रेडिएंट को आमतौर पर किसी अतिरिक्त मदद की ज़रूरत नहीं होती।

रंग चुनने या जाँचने के लिए रंग कन्वर्टर इस्तेमाल करें और कार्ड में गहराई जोड़ने के लिए बॉक्स शैडो जनरेटर का उपयोग करें।

ग्रेडिएंट पर टेक्स्ट

जाँच लें कि ग्रेडिएंट के दोनों सिरों पर टेक्स्ट पढ़ने योग्य रहे, केवल बीच में नहीं। सफ़ेद टेक्स्ट वाला गहरा ग्रेडिएंट या गहरे टेक्स्ट के पीछे हल्का ग्रेडिएंट, चमकीले इंद्रधनुषी ग्रेडिएंट से अधिक सुरक्षित विकल्प है।

इस्तेमाल करने का तरीका

  1. कोई प्रीसेट चुनें या linear, radial या conic चुनें।
  2. एंगल सेट करें और रंगों व उनकी पोज़िशन को एडजस्ट करें; अधिक स्टॉप के लिए एक रंग जोड़ें।
  3. CSS को अपनी stylesheet में कॉपी करें।

गोपनीयता और सीमाएँ

सब कुछ आपके ब्राउज़र में चलता है; आपका पिछला ग्रेडिएंट केवल इसी ब्राउज़र में रखा जाता है।

संबंधित टूल्स

बॉक्स शैडोरंग कन्वर्टरCSS मिनिफ़ायर

अक्सर पूछे जाने वाले सवाल

Linear gradient में angle का क्या मतलब है?

0deg नीचे से ऊपर, 90deg बाएं से दाएं, 180deg ऊपर से नीचे और 270deg दाएं से बाएं जाता है। ग्रेडिएंट उसी दिशा में बनाया जाता है, इसलिए 135deg ऊपर-बाएं कोने से नीचे-दाएं कोने तक जाता है।

Colour stop क्या होता है?

यह एक रंग और ग्रेडिएंट पर 0% से 100% के बीच उसकी वह पोज़िशन होती है, जहां वह रंग ठीक उसी रूप में दिखाई देता है। दो स्टॉप के बीच रंग आपस में मिलते हैं; दो स्टॉप को एक ही पोज़िशन पर रखने से मिश्रण के बजाय एक तेज़ किनारा बनता है—इसी तरह धारियां बनाई जाती हैं।

Conic gradient, radial gradient से कैसे अलग है?

Radial gradient बीच से बाहर की ओर, रिंग्स में रंग बदलता है। Conic gradient घड़ी की सुइयों की तरह केंद्र के चारों ओर रंग बदलता है, इसलिए यह कलर व्हील और pie chart के लिए उपयोगी है।

क्या मुझे अभी भी -webkit- prefixes की ज़रूरत है?

नहीं। हर मौजूदा ब्राउज़र बिना prefix के linear-gradient और radial-gradient को सपोर्ट करता है, और conic-gradient इन सभी में 2021 से काम कर रहा है। पहली लाइन का fallback रंग केवल बहुत पुराने ब्राउज़र के लिए है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं