How to Create a Dynamic Opacity Gradient in CSS for Text Overlays?

Creating an Opacity Gradient in CSS

Despite having a dynamic background color, the goal is to create an effect that partially obscures text while respecting the background. While a white overlay works for static backgrounds, a CSS opacity gradient is needed for dynamic backgrounds.

Using CSS Mask Images

Modern browsers (Chrome, Safari, Opera) support using CSS mask images to create the desired effect. The key is to define a mask that incorporates a gradient that transitions to transparency:

<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>

Where rgba(0,0,0,1) represents full opacity, and rgba(0,0,0,0) represents full transparency.

Demo and Compatibility

View a demo to observe the effect in action.

Note that this technique relies on the mask-image property, which has limited support in older browsers. Firefox, in particular, currently supports SVG masks instead.

For more information and browser compatibility details, refer to Caniuse: https://caniuse.com/?search=mask-image

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