Splitting Text Color with CSS when compared to the background

  • A+
Category:Languages

New coder here, hope you can help. I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

Splitting Text Color with CSS when compared to the background

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

Very new coder here so please try and be as simple as possible. Thank you!

* {   margin: 0;   padding: 0 }  header {   overflow: hidden;   height: 100vh;   background-color: #FFF;   background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);   min-height: 500px; }  h2 {   color: white;   font: 900 35vmin/35vh cookie, cursive;   text-align: center;   position: fixed;   top: 0px;   left: 20px;   mix-blend-mode: difference; }  h2:after {   color: white;   mix-blend-mode: difference; }
<header>   <h2>On A Mission</h2> </header>

 


Nice question. Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 {   background: linear-gradient(30deg, #adf175 50%, #FFF 50%);   -webkit-background-clip: text;   -webkit-text-fill-color: transparent; } 

Basically, one applies the linear-gradient background on the text element , h2 in this case, and use background-clip property to clip the background to extend to the text only . Finally use the text-fill-color to set the color of the h2 to transparent

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

body {   font-size: 16px;   font-family: Verdana, sans-serif; }  .wrap {   width: 50%;   margin: 0 auto;   border: 1px solid #ccc;   text-align: center;   background: linear-gradient(30deg, #FFF 50%, #adf175 50%); }  h2 {   background: linear-gradient(30deg, #adf175 50%, #FFF 50%);   -webkit-background-clip: text;   -webkit-text-fill-color: transparent; }
<div class="wrap">   <h2>Hello World</h2> </div>

Caution : background-clip:text is an experimental tech

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: