Search code examples
cssgradientopacitycss-mask

Is there a way to change the opacity of my text from the center in CSS?

I am currently wondering if this is possible to change the opacity of my text in CSS... but from the center, like if I could give a point (Like 50% of my width) and make the opacity at 0 at this precise point, and increase it as we are getting away from it.

Here is the result I am trying to reach : What I am expecting

The problem here, is that I can't modify the background (like doing a linear-background stuff here), because the background is not a single color : My background

And so... Here I am. I have been able to reach this state : My state

By using this :

-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

I think I am getting closer to a solution, but I really wanted to know if there was an easier / more common way to do this.

Thank you for reading, have a nice day !

Solution

  • mask is what you need but consider the correct gradient and in your case you need a radial-gradient

    h1 {
  margin:auto;
  display:table;
  color:#fff;
  font-size:50px;
  /* simply control the 10% */
  -webkit-mask:radial-gradient(circle farthest-side,#0000 10%,#000);
          mask:radial-gradient(circle farthest-side,#0000 10%,#000);
}

html {
 min-height:100%;
 background:linear-gradient(45deg,red,blue);
}
    <h1> some text</h1>