CSS3 opacity gradient?

Question

I am looking to create an effect like this, but my website has a dynamic background-color. Note that this example uses a white overlay, which does not work with different backgrounds.

p {     width: 300px;     overflow: hidden;     height: 50px;     line-height: 50px;     position: relative; } p:after {     content: "";     width: 100px;     height: 50px;     position: absolute;     top: 0;     right: 0;     background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)); } 

What I was hoping to do was to set up a CSS opacity gradient. This sort of works, but the code is too messy. Looking at this second example, I could implement it in jQuery, but is there any way to do this entirely in CSS?

Answer 1

You can do it in CSS, but there isn't much support in browsers other than modern versions of Chrome, Safari and Opera at the moment. Firefox currently only supports SVG masks. See the Caniuse results for more information.

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))); } 

The trick is to specify a mask that is itself a gradient that ends as invisible (thru alpha value)

See a demo with a solid background, but you can change this to whatever you want.

DEMO

Notice also that all the usual image properties are available for mask-image

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

<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

Now, another approach is available, that is supported by Chrome, Firefox, Safari and Opera.

The idea is to use

mix-blend-mode: hard-light; 

that gives transparency if the color is gray. Then, a grey overlay on the element creates the transparency

div {    background-color: lightblue;  }    p {    color: red;    overflow: hidden;    position: relative;    width: 200px;    mix-blend-mode: hard-light;  }    p::after {    position: absolute;    content: "";    left: 0px;    top: 0px;    height: 100%;    width: 100%;    background: linear-gradient(transparent, gray);    pointer-events: none;  }

<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>