Text on Top of CSS Gradient

Question

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>

score 0 · Accepted Answer · answered Sep 03 '22 at 15:04

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.

score 0 · Answer 2 · answered Sep 03 '22 at 15:10

This is the formatted code.

<div class="test">
    <div class="test-two">
      <p>TEXT</p>
    </div>
  </div>
  <style>

    p{
        font-size: 5rem;
        position: absolute;
        z-index: 99;
       
    }
  .test {
    background: radial-gradient(120% 120%, red 30%, #000);
    height: 50vh;
   }
  .test:before {
    /* margin-top: 7.5vh; */
    height: inherit;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(120% 1200%, blue 30%, #000);
    -webkit-mask: linear-gradient(to top,transparent, #fff);
    mask: linear-gradient(to top, transparent, #fff);
  }
  .test-two {
    
    height: 100%;
    position: relative;
    background: radial-gradient(120% 120%, green 30%, #000);
    -webkit-mask: linear-gradient(to left, transparent, #fff);
    mask: linear-gradient(to left, transparent, #fff);
    z-index: 99;
  }
  .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;
  }

Text on Top of CSS Gradient

2 Answers2