Glowing text in a website is a great way to catch a viewer’s attention. Nowadays, with the use of the css3 property, you can easily achieve this effect.
There are various techniques that you can use depending on the situation. By using the animation property, you can create the glowing text animation
CSS3 introduced a new property called ‘text-shadow which allows us to use different text shadows.
This Article will be built on the main idea that CSS3 is fun to learn and easy to use. That’s why instead of the boring stuff, I am going to create a glowing text animation.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 class="uss-glow">Uss Web Solution Blog</h1>
</body>
</html>CSS
<style>
body {
background-color: black;
font-family: cursive;
}
.uss-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;
}
}
</style>