Glow Text effect

Hello coders,

In this blog we will code for glowing text. Using HTML and CSS code we can do magical changes. For beginners, this simple code is very easy and good. We are using the text-shadow and animation property in the CSS file to glow our text.

Simply copy and paste the following code

HTML Code:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glow Text</title>
    <link rel="stylesheet" href="main.css">
    <link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
</head>
<body>
    <h1 class="glow">www.codeithub.com</h1>
</body>
</html>

CSS Code:

<!-- code by CodeitHub ( https://CodeitHub.com ) -->
*{
    font-family: 'Aclonica';
    font-size: 50px;
    background-color: #110a0a;
  }
  .glow {
    font-size: 60px;
    color: #fff;
    text-align: center;
    z-index: 2;
    position: absolute;
    top:40%;
    right:15%;
    left:15%;
    animation: glow 0.5s ease-in-out infinite alternate;
  }
  @keyframes glow {
    from {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #71c7f0, 0 0 30px #50aab9, 0 0 40px #5982db, 0 0 50px #4b52b9, 0 0 60px #828bf1;
    }
    to {
      text-shadow: 0 0 10px #7d99d4, 0 0 20px #723bf3, 0 0 30px #5f37ee, 0 0 40px #4b26ee, 0 0 50px #3124df, 0 0 60px #1b10c2, 0 0 70px #170991;
    }
  }

OUTPUT

See also  Skeuomorphism Style Switch Button In Pure CSS

More Examples:

Background Scroll using HTML and CSS

Responsive Price Table using HTML and CSS

How to Change WooCommerce Order Received Thank You Text

Leave a Reply

Your email address will not be published. Required fields are marked *