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

Question

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?

score 1 · Accepted Answer · answered Jul 03 '23 at 11:38

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

<h1>Shine Bright Like a Diamond</h1>

Related: Responsive shine animation using linear-gradient as background

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

1 Answers1