- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 −
Updated on 11-May-2020 09:42:04
- Related Questions & Answers
- 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
- 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?
- CSS3 RGBA, HSL and HSLA Color Values
- Add transparency to the background with CSS
Advertisements