- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops.
Following is the code to set transparent linear gradient using CSS3 −
Example
<!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>
Output
The above code will produce the following output −
- Related Articles
- CSS3 Linear gradients
- CSS3 Radial Gradients
- CSS3 Repeat Radial Gradients
- CSS3 Multi color Gradients
- Creating CSS3 Radial Gradients
- Using the CSS3 Linear and Radial Gradients
- Arrange two or more colors in linear formats using CSS3 Gradients
- CSS Opacity / Transparency
- What is transparency?
- CSS Transparency Using RGBA
- Types of Gradients in CSS
- Adjusting Text background transparency in Matplotlib
- Transparency for Poly3DCollection plot in Matplotlib
- How to compute gradients in PyTorch?
- With CSS add transparency to a button

Advertisements