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.
EDIT: all browsers except IE now support all mask-
properties mentioned here.
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>