Twentyonehundred Twentyonehundred - 24 days ago 11
CSS Question

Combining CSS background animations and transparent text fill color

I'm attempting to create an animated gradient background with transparent ("cut out") text over the top of an animated gradient background.

At the moment I have an animated gradient background - basically using the code from here: https://www.gradient-animator.com/

Then I have an absolutely positioned element over the top with a black background and a mixed-blend-mode attribute (currently darken).

This still doesn't look right as the mix-blend-mode affects the background too, where I just want the text to change.

I have a very rough idea here: https://codepen.io/twentyonehundred/pen/pNjpJW where the grey background clearly leaks some colour (a black background does not). There may be much better ways of achieving the effect I want?

Code:



.element {
height: 250px;
width: 100%;
background: linear-gradient(135deg, #2efdc7, #d71414, #146ed7);
background-size: 600% 600%;
animation: AnimationName 7s ease infinite;
}
@keyframes AnimationName {
0% {
background-position: 0% 43%
}
50% {
background-position: 100% 58%
}
100% {
background-position: 0% 43%
}
}
div {
position: relative;
}
h1 {
color: #fff;
background-color: #23282d;
position: absolute;
bottom: 0;
width: 100%;
font-size: 10vw;
font-weight: 100;
mix-blend-mode: darken;
}

<div>
<div class="element"></div>
<h1>abcd</h1>
</div>





SOLUTION EXAMPLE

Below is an example of a working solution as suggested by Federico.

https://codepen.io/twentyonehundred/pen/pNjpJW

Answer

Try using -webkit-background-clip: text;

.element {
  width: 100%;
  height: 100px;
  background: #23282d;
}
h1 {
  font-family: Arial;
  font-size: 10vw;
  background: -webkit-linear-gradient(135deg, #2efdc7, #d71414, #146ed7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 600% 600%;
  animation: AnimationName 7s ease infinite;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 43%
  }
  50% {
    background-position: 100% 58%
  }
  100% {
    background-position: 0% 43%
  }
}
<div class="element">
  <h1>abcd</h1>
</div>

Comments