CSS के साथ ग्रेडिएंट बैकग्राउंड कलर सेट करने के लिए, आपको linear-gradient() फ़ंक्शन को अपनी background प्रॉपर्टी में जोड़ना होगा।
आइए एक साधारण बॉक्स क्लास बनाएं और इसे आज़माएं:
<div class="box"></div>.box { width: 200px; height: 200px; background: linear-gradient(yellow, red); }परिणाम:
आप ग्रेडिएंट फ़ंक्शन के अंदर रंगों को पुनर्व्यवस्थित करके बदल सकते हैं कि कौन सा रंग शुरू होता है और कौन सा खत्म होता है:
/* लाल से शुरू, पीले पर खत्म */ background: linear-gradient(red, yellow);लीनियर-ग्रेडिएंट कोण/झुकाव बदलें
जैसा कि आप ऊपर के उदाहरणों में देख सकते हैं, linear-gradient() फ़ंक्शन डिफ़ॉल्ट रूप से टॉप-टू-बॉटम ग्रेडिएंट बनाता है। आप ग्रेडिएंट कोण को आसानी से अपनी इच्छानुसार कुछ भी बदल सकते हैं।
उदाहरण के लिए, यहां एक लीनियर ग्रेडिएंट है जो 45 डिग्री झुका हुआ है:
/* पीले से शुरू, लाल पर खत्म */ linear-gradient(45deg, yellow, red);परिणाम:
आप 0 से 360 तक किसी भी डिग्री का उपयोग कर सकते हैं।
अपने ग्रेडिएंट्स के लिए HEX, RGB, या RGBa उपयोग करें
आप अपने लीनियर-ग्रेडिएंट्स के लिए HEX, RGB, और RGBa कलर मॉडल का उपयोग कर सकते हैं। RGBa सबसे लचीला है क्योंकि यह आपको अपने लीनियर ग्रेडिएंट्स पर अल्फा चैनल (पारदर्शिता के लिए) का उपयोग करने की अनुमति देता है।
जैसा कि आप नीचे देख सकते हैं, जब आप RGBa का उपयोग करते हैं तो आप अपने ग्रेडिएंट्स के साथ जितना चाहें उतना रचनात्मक हो सकते हैं:
उपरोक्त लीनियर-ग्रेडिएंट उदाहरण के लिए यहां CSS है:
{ background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } 
