Home Is it possible to do gradient text and shining text effect at the same time?

Questions

Is it possible to do gradient text and shining text effect at the same time?

July 3, 2023

I want to apply shining text effect (https://codepen.io/fazlurr/pen/qbWMRv)

.shine {
    // set background
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

and gradient text (https://cssgradient.io/blog/css-gradient-text/)

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333); // set background
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

at the same time. The color for shining text and gradient text are different. I saw both effect need to set background and "-webkit-background-clip: text", so I can’t achieve the desirable result (setting background for one override another). Is there any way to apply these 2 effects at the same time?

>Solution :

You need multiple background and make sure to check the date of the demos/articles you find online. The shine effect you are using is very very old and using an outdated syntax

h1 {
  font-size: 72px;
  font-weight: bold;
  font-family: sans-serif;
  background: 
    /* the shine layer */
    linear-gradient(-45deg, #0000 40%,#fff5,#0000 60%)
     right/300% 100%,
    /* the color layer*/
    linear-gradient(45deg,red, blue);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color:#000;
  animation: shine 2s infinite;
}

@keyframes shine {
  to {background-position: left;}
}

body {
 background: #000;
}