How to Glowing Text with CSS

Hello Everyone Welcome to Frontend Gyaan and My New Blog. In this blog, I will share the code and Tips and Tricks on how to Glowing Text with HTML and CSS only.

Follow @frontendgyaan on Instagram for web development content daily.

Also, Check out –

HTML

Create an <h1> tag with a class “glow”. Write a text in the tag

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="glow">FRONTEND GYAAN</h1>
</body>
</html>

CSS – Glowing Text

Set the color of the <body> element with the background property.
Style the “glow” class with the font-size and color properties and then, set the text-align property to its “center” value and set animation to glow 1s ease-in-out infinite alternate.
Use the @keyframes rule. It can start with a percentage (%) or with the keywords “from” (same as 0%) and “to” (same as 100%).
Define the values of the text-shadow property. The first value is the horizontal offset of the shadow, and the second one is the vertical offset. The third is the blur radius, and the final value is the color of the text.

body {
  background-color: #20222f;
  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 #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }

Output:

Link – Result

If you found any value in this blog you can support me by buying me a coffee. and also Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Image	Product	Author	Price
Our Pick1 5	Web Design with HTML, CSS, JavaScript, and Jquery	by Jon Duckett	Purchase Now Check on Amazon
Our Pick2	HTML 5 Black Book, Covers CSS 3, JavaScript	by DT Editorial Service	Purchase Now Check on Amazon
Our Pick3	Data Structures Using C and C+	by Langsam/Augenstein/Tenenbaum	Purchase Now Check on Amazon
Our Pick4	Operating system concept 9th EDITION	by Abraham Silberschatz	Purchase Now Check on Amazon