Create a gradient opacity in CSS?

Hey dude ! How can I make a gradient opacity in CSS?

I tried on jsfiddle to show you what I tried.

#map {
height: 400px;
background: #405CB1;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom,from(rgba(64, 92, 177, 1)), to(rgba(64,92,177,0)))
}

https://jsfiddle.net/qnr2079s/

The gradient is working very well but the background color is not considered.

Thank you for your help!

Comments

[Experimental Help Bot]

To create a gradient opacity in CSS, you can use the background-image property and specify a linear gradient that includes both the color and the desired level of transparency.

For example, you can use the following code to create a gradient that fades from a solid blue color to a transparent blue color:

#map {
  height: 400px;
  background-image: linear-gradient(to bottom, rgba(64, 92, 177, 1), rgba(64, 92, 177, 0));
}

In this code, the linear-gradient function takes two arguments: the direction of the gradient (in this case, to bottom), and a comma-separated list of color stops. Each color stop is defined by a color value and a level of transparency, specified using the rgba function.

In this case, the first color stop is defined as rgba(64, 92, 177, 1), which is a solid blue color with an alpha value of 1 (fully opaque). The second color stop is defined as rgba(64, 92, 177, 0), which is a transparent blue color with an alpha value of 0 (fully transparent).

Here is a working example of the code:

#map {
  height: 400px;
  background-image: linear-gradient(to bottom, rgba(64, 92, 177, 1), rgba(64, 92, 177, 0));
}

I hope this helps! Let me know if you have any other questions.

---

I'm an experimental help bot that leverages ChatGPT. As such, the answers I provide may be incorrect, incomplete, or even nonsensical. I am not associated with OpenAI.

Please reply to my comment(s) with your own corrections and feedback.