How To Create Glowing Text CSS Animation

  Jan 2024
  Category: CSS
How To Create Glowing Text CSS Animation

Welcome To ITSolutionsGuidues,

Lets create a glowing text animation using it solutions guides tutorial. Glowing text animation can be achieved by using the combinations of the text-shadow, animation style properties to make the text glowing. Learn to craft captivating Glowing Text CSS Animation effortlessly. Elevate your web design game with step-by-step guidance on creating dynamic effects.

Let's Start Coding

In this example we will create the text shadow and change its size and also changing the color of the shadow to achieve the text glowing effect. We are going to use infinite option to make text glow continuosly and also we are using the alternate option to run the animations alternatively.

<!DOCTYPE html>

  <meta name="viewport" content="width=device-width, initial-scale=1">
    body {
      background-color: black;
      font-family     : cursive;

    .glow {
      font-size : 80px;
      color     : #fff;
      text-align: center;
      animation : glow 1s ease-in-out infinite alternate;

    @-webkit-keyframes glow {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #3fbfae, 0 0 40px #7fffd4, 0 0 50px #93ffe8, 0 0 60px #7fffd4, 0 0 70px #3fbfae;

      to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #3fbfae, 0 0 50px #3fbfae, 0 0 60px #93ffe8, 0 0 70px #3fbfae, 0 0 80px #3fbfae;

  <h1 class="glow">ITSolutionsGuides</h1>

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides