लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को लीनियर फॉर्मेट में व्यवस्थित करने के लिए किया जाता है जैसे टॉप टू बॉटम। ट्रांसपेरेंसी जोड़ने के लिए, 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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
