How to Create a CSS Opacity Gradient Effect for Modern Websites?

Achieving CSS Opacity Gradient Effect

For modern websites with dynamic background colors, creating an opacity gradient effect similar to the provided example can be achieved with CSS, but requires an alternative approach.

As opposed to using white overlays, CSS mask properties offer a more versatile solution. A trick is to define a mask that is a gradient itself, with the end point set to transparent (via alpha value).

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

Support for mask properties is currently limited to modern versions of Chrome, Safari, and Opera. Firefox only supports SVG masks at present.

However, in an exciting development, all major browsers now support all the mentioned mask properties, except for Internet Explorer. This allows for a seamless implementation of CSS opacity gradients across the web.

For a full demonstration with a solid background, see the following code:

<code class="css">p  {
  color: red;
  font-size: 30px;
  -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));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

The above is the detailed content of How to Create a CSS Opacity Gradient Effect for Modern Websites?. For more information, please follow other related articles on the PHP Chinese website!