CSS linear-gradient() फंक्शन

linear-gradient() फंक्शन

linear-gradient() का उपयोग रैखिक ग्रेडिएंट को बैकग्राउंड इमेज के रूप में परिभाषित करने के लिए किया जाता है।

सिंटैक्स:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

पैरामीटर्स:

• direction: ग्रेडिएंट की दिशा (to right, to bottom right, 45deg, आदि)
• color-stop: रंग और वैकल्पिक स्थिति (उदाहरण: red, blue 50%, #fff 100%)

उदाहरण 1: विकर्ण ग्रेडिएंट

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: white;
  background-image: linear-gradient(to bottom right, red, blue);
  position: absolute;
  right: 90px;
}
</style>
</head>
<body>
<h2>डेमो हेडिंग</h2>
<div>यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। </div>
</body>
</html>

आउटपुट

लाल से नीले रंग का ग्रेडिएंट ऊपर-बाएं से नीचे-दाएं तक।

उदाहरण 2: इंद्रधनुषी ग्रेडिएंट (बॉडी पर)

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
  text-decoration: overline;
  text-decoration-color: yellow;
  font-size: 1.3em;
}
</style>
</head>
<body>
<h1>परीक्षा विवरण</h1>
<p class="demo">परीक्षा 20 दिसंबर को।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

आउटपुट

पूरे पेज पर बाएं से दाएं इंद्रधनुषी ग्रेडिएंट।

ग्रेडिएंट दिशा विकल्प:

कलर स्टॉप्स के साथ नियंत्रण:

/* स्थिति के साथ कलर स्टॉप्स */
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);

/* हार्ड स्टॉप्स (तत्काल रंग परिवर्तन) */
background: linear-gradient(to right, red 50%, blue 50%);

/* दोहराने वाला ग्रेडिएंट */
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

ब्राउज़र सपोर्ट:

• सभी आधुनिक ब्राउज़र्स
• पुराने के लिए वेंडर प्रीफिक्स: -webkit-linear-gradient, -moz-linear-gradient
• IE10+ (प्रीफिक्स के साथ)