Question 265754 in CSS Question posted in
Some basic documentation can be found here.

Glowing Dynamic Text Animation in CSS

I want to achieve an effect similar to the Clash Royale glowing text in CSS.

Looking online I’ve only found ways to make the text glow, yet not dynamically. Mainly I found this link which highlights how to make the glowing part, and this link with many different options to make the text dynamically animated. Is it possible to combine the 2 into that result?

Tags:

2

Answers


  1. 0

    You could use a background animation with background-clip: text;
    and the glow effect (using text-shadow) on a ::before pseudo element:

    body {background: #2d2d2d;  text-align: center; padding: 2rem; }

.text {
  position: relative;
  font: bold 3rem/1.4 'Brush Script MT', cursive;
  letter-spacing: -0.1rem;
  white-space: nowrap;
  background: linear-gradient(90deg, #fffcb5 0%, #f5a223 30%, #fffcb5 60%, #f5a223 80%, #fffcb5 100%);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 3px #000;
  color: transparent;
  animation: bg 3s linear 0s infinite;
}

.text::before {
  position: absolute;
  z-index: -1;
  content: attr(data-text);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes bg {
  0% {  background-position: 0%; }
  100% { background-position: 200%; }
}

@keyframes glow {
  0% {  background-position: 0%; }
  100% { background-position: 200%; }
}
@keyframes glow {
  from {
    text-shadow: 3px 3px 1px #000, 0 0 1rem #fc55;
  }
  to {
    text-shadow: 3px 3px 1px #000, 0 0 1.7rem #fa29;
  }
}
    <span class="text" data-text="Stack Overglow">Stack Overglow</span>
    Login or Signup to reply.
  2. 0

    You can also try the below code:

    @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
body {
  background-color: black;
}

.apple-sauce {
  font-family: 'Anton', sans-serif;
  font-size: 50px;
  background: linear-gradient(to right, #00c3ff, #ffff1c);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: appleSauceAnimate 2s ease-in-out infinite alternate;
}

@keyframes appleSauceAnimate {
  to {
    background-position: 120%; /* You can adjust the % as per your exact needs. */
  }
}
    <h1 class="apple-sauce">AppleSauce</h1>

    Explanation of the above CSS:

    • linear-gradient: I have used the gradient from here. You can adjust the color as per your needs.
    • background-clip: text; – to make the background of the text transparent.
    • text-fill-color: transparent; – to make the applesauce text transparent.
    • background-size: 200% auto; – to make the background twice as wide as the text. And why this is required because if the background is not twice as wide as the text, the animation will not be visible because the background will not extend beyond the text.
    • Finally the animation shorthand.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search