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