htmlcsscss-gradientscss-mask

Text on Top of CSS Gradient

I have the following code with various gradients, which uses -webkit-mask. I want to be able to add some text on top of the gradient (where I have TEXT).

Here is the current code:

.test {
  background: radial-gradient(120% 120%, red 30%, #000);
  height: 50vh;
}
.test:before {
  margin-top: 7.5vh;
  height: 50vh;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(120% 120%, blue 30%, #000);
  -webkit-mask: linear-gradient(transparent, #fff);
  mask: linear-gradient(transparent, #fff);
}
.test-two {
  height: 50vh;
  position: relative;
  background: radial-gradient(120% 120%, green 30%, #000);
  -webkit-mask: linear-gradient(to right, transparent, #fff);
  mask: linear-gradient(to right, transparent, #fff);
}
.test-two:after {
  height: 50vh;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(120% 120%, gold 30%, #000);
  -webkit-mask: linear-gradient(transparent, #fff);
  mask: linear-gradient(transparent, #fff);
  color: white;
}
body {
  margin: 0;
}
<div class="test">
  <div class="test-two">
    <p>TEXT</p>
  </div>
</div>

Solution

  • It seems like it won't be possible to put the text on top since you're using a mask on those containers. But it might be possible to change the mask's linear gradient starting point from left to right so that the transparent part might fall on top of the text.

    Thus I tried to reverse it -webkit-mask: linear gradient(to left, transparent, #fff);mask: linear-gradient(to left, transparent, #fff); and it displayed the text.

    I hope that's helpful.