लीनियर ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों को लीनियर फॉर्मेट जैसे ऊपर से नीचे तक व्यवस्थित करने के लिए किया जाता है। पारदर्शिता जोड़ने के लिए, RGBA () फ़ंक्शन का उपयोग करें और रंग स्टॉप को परिभाषित करें।
CSS3 का उपयोग करके पारदर्शी रैखिक ढाल सेट करने के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
