How to make gradient transparency

Ask a question+

Is there easy way to make CSS gradient transparency?

Sara 170
add comment

1 Answer


You can use multiple backgrounds to achieve a transparent effect. To make it, you can use the rgba() function for defining the color stops. The last parameter in the rgba() function can be a value from 0 to 1, which will define the transparency of the color. 0 indicates full transparency, 1 shows full color.

<!DOCTYPE html>
    <title>Title of the document</title>
      .gradient {
      height: 200px;
      background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
    <div class="gradient"></div>

Source https://www.w3docs.com/learn-css/css-gradients.html

Muhamed Aziz 320
add comment

Your Answer