How to Achieve Opacity Gradients in CSS?

Implementing Opacity Gradients in CSS

In an effort to replicate a specific visual effect involving an overlay on a dynamic background color, many have sought the solution of a CSS opacity gradient. While the provided examples in the question demonstrate attempts at this implementation, they fall short due to code complexity or browser limitations.

Thankfully, advancements in browsers have made it possible to achieve opacity gradients entirely within CSS using the mask-image property. Currently supported by Chrome, Safari, Opera, and all browsers except Internet Explorer, this property offers a more efficient and cross-browser compatible solution.

CSS Implementation:

<code class="css">p {
    color: red;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}</code>

The trick lies in using a gradient as the mask itself, where the gradient transitions to transparency (via alpha values). This allows for the creation of an overlay effect that adjusts dynamically based on the background color.

Example with Solid Background:

[Demo Link]

Additional Notes:

• All image properties for mask-image are supported.
• CSS masking is only available for text elements and may not behave as expected with images.

The above is the detailed content of How to Achieve Opacity Gradients in CSS?. For more information, please follow other related articles on the PHP Chinese website!