टास्क पथ / इनपुट से परिणाम तक
CSS ग्रेडिएंट कैसे रचें
- 01
ग्रेडिएंट का प्रकार चुनें
ग्रेडिएंट प्रकार खोलें और सीधे मिश्रण के लिए लीनियर या गोलाकार के लिए रेडियल चुनें। पूर्वावलोकन बैज काम करते समय मौजूदा कोण दिखाता है। 2–16 रंग बिंदु · रेखीय / रेडियल · जोड़ें / हटाएँ / उलटें / यादृच्छिक
- 02
दिशा या फ़ोकस सेट करें
दिशा / फ़ोकस 0 से 360 तक चलती है। लीनियर ग्रेडिएंट के लिए यह डिग्री में कोण है; रेडियल के लिए यह फ़ोकस बिंदु को केंद्र के इर्द-गिर्द वलय पर रखती है। बैज मान को लाइव ट्रैक करता है, जिससे छोटे सुधारों का आकलन आसान हो जाता है।
- 03
रंग और स्टॉप चुनें
2–16 रंग स्टॉप जोड़ें। उनकी स्थिति 0%–100% में और गैर-घटते क्रम में होनी चाहिए; समान स्थितियाँ स्पष्ट किनारा बनाती हैं। स्टॉप संपादित, हटाएँ, उलटें या यादृच्छिक करें और पूर्वावलोकन जाँचें।
- 04
ब्लेंड बैंड नियंत्रित करें
दोनों स्टॉप के बीच की दूरी ट्रांज़िशन क्षेत्र है: 1% की दूरी पर स्टॉप दो-रंगी धारियों के लिए लगभग कड़ा किनारा बनाते हैं, जबकि 0% और 100% पर स्टॉप — डिफ़ॉल्ट — पूरी चौड़ाई में सबसे मुलायम मिश्रण देते हैं। नंबरों के बजाय पूर्वावलोकन देखें।
- 05
डिक्लेरेशन कॉपी करें
toolars-gradient.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। .gradient नियम एक ही background डिक्लेरेशन है — linear-gradient(…deg, …) या radial-gradient(circle at …, …) — आपके स्टॉप से ठीक-ठीक मेल खाता हुआ।
- 06
इसे लगाएं और बढ़ाएं
वर्तमान परिणाम निर्यात करें. HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।