CSS ग्रेडिएंट जेनरेटर
रंग और कोण चुनें और CSS ग्रेडिएंट कोड को प्रिव्यू के साथ तैयार करें
विशेषताएं
प्रिव्यू और कोड एक साथ अपडेट होते हैं
जब भी रंग या कोण बदलता है, रूप और CSS दोनों एक साथ बदल जाते हैं
रैखिक, गोलाकार और शंकु आकार का समर्थन
कोण, आकार और केंद्र स्थिति तक प्रत्येक प्रकार के लिए विस्तार से निर्दिष्ट करें
अधिकतम 10 रंगों को ड्रैग से समायोजित करें
रंग की स्थिति बार पर ड्रैग से, पारदर्शिता स्लाइडर से समायोजित करें
8 प्रकार के नमूने और यादृच्छिक जनन
पारंपरिक रंग योजना या यादृच्छिक रंग योजना से शुरु करके सूक्ष्म समायोजन करें
उपयोग कैसे करें
प्रकार चुनें
रैखिक, गोलाकार, या शंकु आकार से ग्रेडिएंट का प्रकार चुनें
रंग तय करें
रंग कोड या नमूने से रंग चुनें, 'रंग जोड़ें' से रंग बढ़ाएं और स्थिति और पारदर्शिता समायोजित करें
दिशा समायोजित करें
रैखिक के लिए कोण या दिशा बटन, गोलाकार और शंकु के लिए केंद्र स्थिति निर्दिष्ट करें
कोड कॉपी करें
'कॉपी' बटन से एक पंक्ति की CSS को अपनी शैली में पेस्ट करें
उपयोग के मामले
हीरो छवि की पृष्ठभूमि बनाना
साइट के शीर्ष या बटन की पृष्ठभूमि का रंग कोड लिखे बिना तय करें
ब्लॉग शीर्षक के रंग का चयन
नमूने से समान रंग योजना चुनकर लेख के शीर्षक की पृष्ठभूमि को व्यवस्थित करें
फ़ोटो पर ओवरले
पारदर्शिता को कम करके फ़ोटो के ऊपर एक अर्ध-पारदर्शी परत बनाएं
बहु-रंग ग्रेडिएंट का समायोजन
3 या अधिक रंगों की सीमा की स्थिति को ड्रैग से धीरे-धीरे समायोजित करें
मौलिक ज्ञान
रैखिक, गोलाकार और शंकु का अंतर
CSS ग्रेडिएंट में तीन फ़ंक्शन हैं जिनके रंग परिवर्तन का तरीका अलग है, और सभी background गुण में लिखकर उपयोग किए जाते हैं।
- रैखिक ग्रेडिएंट：रैखिक ग्रेडिएंट निर्दिष्ट कोण की सीधी रेखा के साथ रंग परिवर्तित होता है।
- गोलाकार ग्रेडिएंट：गोलाकार ग्रेडिएंट केंद्र स्थिति से बाहर की ओर वृत्त या दीर्घवृत्त के आकार में रंग फैलता है।
- शंकु ग्रेडिएंट：शंकु ग्रेडिएंट केंद्र स्थिति के चारों ओर घड़ी की सुई की दिशा में एक चक्कर लगाते हुए रंग परिवर्तित होता है।
कोण और दिशा कीवर्ड का पत्राचार
रैखिक ग्रेडिएंट का कोण 0deg नीचे से ऊपर की ओर होता है, और संख्या जितनी अधिक होती है, घड़ी की सुई की दिशा में घूमता है। कोण 'to right' जैसे दिशा कीवर्ड से भी लिखा जा सकता है, 90deg 'to right' के समान दिशा है, और 180deg 'to bottom' के समान दिशा है।
रंग स्टॉप और पारदर्शिता का लेखन
रंग स्टॉप (कलर स्टॉप) उस स्थिति को दर्शाता है जहां ग्रेडिएंट में वह रंग होता है, जहां 0% शुरुआत को और 100% अंत को दर्शाता है। उदाहरण के लिए '#3B82F6 0%, #8B5CF6 100%' शुरुआत के नीले रंग से अंत के बैंगनी रंग में रंग परिवर्तन करने का निर्देश है।
- #RRGGBB प्रारूप：#RRGGBB प्रारूप लाल, हरे और नीले की शक्ति को 2 अंकों के 16 आधारित संख्या से व्यक्त करने का रंग लेखन तरीका है, #FF0000 अपारदर्शी लाल रंग दर्शाता है।
- rgba प्रारूप：rgba प्रारूप लाल, हरे और नीले के मान (0-255) के साथ पारदर्शिता (0-1) को जोड़कर रंग का लेखन तरीका है, 0.5 पारदर्शिता आधा पारदर्शी रंग दर्शाता है।
सुरक्षा और गोपनीयता
पूरी तरह ब्राउज़र में
दर्ज किया गया डेटा केवल आपके ब्राउज़र के भीतर ही प्रोसेस होता है और बाहर नहीं भेजा जाता।
केवल ब्राउज़र में प्रसंस्करण
ग्रेडिएंट कोड जनन पूरी तरह आपके ब्राउज़र में किया जाता है, इनपुट डेटा सर्वर को नहीं भेजा जाता।
संचार HTTPS से एन्क्रिप्ट किया गया है
पृष्ठ लोडिंग भी TLS द्वारा एन्क्रिप्ट की जाती है, सामग्री तीसरे पक्ष द्वारा नहीं पढ़ी जा सकती।
तीसरे पक्ष को कोई प्रसारण नहीं
विज्ञापन नेटवर्क या ट्रैकर जैसी बाहरी सेवाओं को इनपुट सामग्री नहीं भेजी जाती।
परिणाम की स्वचालित बचत नहीं
चुना हुआ रंग और सेटिंग्स या इनपुट सुझाव सर्वर पर संग्रहीत नहीं किए जाते।
Google खोज पर RAKKOTOOLS को फॉलो करें
185 उपयोगी उपकरण, Google खोज और AI खोज से खोजने में आसान हो जाएंगे!
- खोज में मिलता है
- AI खोज में भी प्रदर्शित
- नए उपकरण की खोज करें
अपडेट जानकारी
- update #312
CSS ग्रेडिएंट जेनरेटर जोड़ा गया, रंग और कोण चुनकर कोड जेनरेट करता है