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

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>
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;
  }

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

Share your love
Default image

Saksham Raghuvanshi

Hi, I am Saksham Raghuvanshi 2nd-year CSE Student Coding and making websites is my hobby I share daily web development tips and tricks to level up your knowledge 🔥 .

Leave a Reply

Your email address will not be published.