LAST UPDATED: AUGUST 16, 2021
How to create text glow with CSS?
A glowing text on a website can enhance and beautify your webpage. The glowing text can just change the user's mood and be easily visible to the user. It can be created by using CSS styling. So, let's create a glowing text with CSS.
Creating glow text with CSS
To create a glow text use CSS shadow-text property. But glow effect cannot be created with a single shadow effect so we need to add multiple values for shadow-text property.
Here, we will add four values to the shadow-text property where the first two represent the horizontal and vertical shadow respectively and the third represents the size of blur radius and the fourth property represent the color of the text.
Example: Creating a glowing text with CSS
In this example, we are creating glowing text shadow using text-shadow values separated by a comma.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.text-glow {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 42px #0fa, 0 0 82px #0fa,0 0 92px #0fa;
color: white;
font-size: 30px;
text-align: center;
}
.container {
background-color: black;
height: 400px;
width: 400px;
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-glow">
<h2> Text Glow </h2>
<p> We have successfully created a glowing text </p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating an animating text glow
To create an animating text glow use the text-shadow property within @keyframes and use the transition property to set delays between transitions. @keyframes chooses the timeline to add shadow and then remove it. So it adds the animating effect to the text.
Conclusion
In this tutorial, we have learned to add glow text to the webpage. Also, we have added animations to the glow text. The glowing text can be added using text-shadow property.
