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>

Dave Zagabe · Accepted Answer · 2022-09-03 15:04:50Z

0

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.

answered Sep 3, 2022 at 15:04

Dave Zagabe

163 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave Zagabe · Accepted Answer · 2022-09-03 15:10:12Z

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

Collectives™ on Stack Overflow

Text on Top of CSS Gradient

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related