CSS के साथ ग्रेडिएंट बैकग्राउंड कलर कैसे सेट करें

CSS के साथ एक ग्रेडिएंट बैकग्राउंड कलर सेट करने के लिए, आपको linear-gradient() . जोड़ना होगा आपके background . पर कार्य करें संपत्ति।

आइए एक साधारण बॉक्स क्लास बनाएं और इसे आज़माएं:

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(yellow, red);
}

परिणाम:

आप लीनियर ग्रेडिएंट फ़ंक्शन के अंदर उन्हें पुन:व्यवस्थित करके बदल सकते हैं कि कौन से रंग प्रारंभ और समाप्त होते हैं:

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

रैखिक-ग्रेडिएंट कोण/झुकाव बदलें

जैसा कि आप ऊपर के उदाहरणों में देख सकते हैं, linear-gradient() फ़ंक्शन डिफ़ॉल्ट रूप से ऊपर से नीचे का ग्रेडिएंट बनाता है। आप आसानी से ग्रेडिएंट एंगल को अपनी इच्छानुसार किसी भी चीज़ में बदल सकते हैं।

उदाहरण के लिए, यहां एक रैखिक ढाल है जो 45 डिग्री झुका हुआ है:

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

परिणाम:

आप 0 से 360 तक किसी भी डिग्री का उपयोग कर सकते हैं।

अपने ग्रेडिएंट के लिए HEX, RGB, या RGBa का उपयोग करें

आप अपने रैखिक-ढाल के लिए HEX, RGB और 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%);
}