Apply filter / mask in CSS?

user_14697038 0
Viewed 39

Anticipated Result: anticipated result

What I managed to get: reality

Please try not to give me absolute values, so that it's responsive. The Text and the background divider should be always at the center. The text should change its color as needed depending on each character's location. Thanks in advance!

My Html Code:

<div class="bg"></div>
<header>Plants</header>
<h1>Fresh Plants <br> for You.</h1>

My CSS:

header {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: white;
    margin-top: 30px;
    margin-left: 40px;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(31,171,137,1) 0%, rgba(31,171,137,1) 50%, rgba(157,243,196,1) 50%, rgba(157,243,196,1) 100%);
    height: 52rem;
    width: 100%;
}

h1 {
        font-size: 5rem;
        /*color: white;*/
        margin-left: 30.2rem;
        font-weight: 700;
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(255,255,255,1);
        /*background: linear-gradient(90deg, rgba(31,171,137,1) 0%, rgba(31,171,137,1) 50%, rgba(157,243,196,1) 50%, rgba(157,243,196,1) 100%);*/
    }
layout css text html
1 Answers

since it's a 90deg direction make both backgrounds fixed so they both consider the sreen as reference:

header {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: white;
  margin-top: 30px;
  margin-left: 40px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(31, 171, 137, 1) 50%, rgba(157, 243, 196, 1) 0) fixed;
  height: 52rem;
  width: 100%;
}

h1 {
  font-size: 5rem;
  font-weight: 700;
  text-align:center;
  color: #0000;
  background: linear-gradient(90deg, #fff 50%, blue 0) fixed;
  background-clip: text;
  -webkit-background-clip: text;
}
<div class="bg"></div>
<header>Plants</header>
<h1>Fresh Plants <br> for You.</h1>

user_86203330
Related