How to Glowing Text with CSS – Frontend Gyaan

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 –

Glowing text HTML and CSS font neon light text effect Frontendgyaan


  • Create an <h1> tag with a class “glow”. Write a text in the tag
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<h1 class="glow">FRONTEND GYAAN</h1>
Glowing text HTML and CSS font neon light text effect frontend gyaan

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;


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

Our Pick1
Web development book by Jon Duckett Frontendgyaan
Web Design with HTML, CSS, JavaScript, and Jquery

by Jon Duckett

Our Pick2
Web development Book by DT Editorial Service Frontend Gyaan
HTML 5 Black Book, Covers CSS 3, JavaScript

by DT Editorial Service

Our Pick3
Data Structures Using C and C+ by Langsam Frontend gyaan
Data Structures Using C and C+

by Langsam/Augenstein/Tenenbaum

Our Pick4
operating System Concept Frontend Gyaan
Operating system concept 9th EDITION

by Abraham Silberschatz

Share your love
Saksham Raghuvanshi

Saksham Raghuvanshi

Hi, I am Saksham Raghuvanshi 2nd-year CSE Student allured by web and tech enthusiasts, working towards making the web more user interactive and accessible for all 😜