Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Glowing Text with CSS
To create a glowing text with CSS, use the animation property. For animations, we use @keyframes. The @keyframes is a rule wherein you need to specify the CSS styles. Bind the animation to an element for it to work successfully.
The animation-name property is used to set the name of the @keyframes animation. The duration of the animation is set using the animation-duration property. In the same way, we have the following properties that allows animations on a web page −
animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
However, in this example, we have used the shorthand animation property to create a glowing text.
We have set the following to form a glowing text −
animation: glowing 1s ease-in-out infinite alternate;
Animation With a Slow Start and end
For the glowing text, the animation-timing-function is set with the above shorthand property that specifies an animation with a slow start and end −
ease-in-out
Infinite Animation
The animation-iteration-count property is set with the above shorthand property to form the animation continue for infinite time i.e., forever −
infinite
Animation Direction
The animation-direction property is used to set whether the animation will play forward or backward. The alternative value suggests animation with alternate cycles −
alternate
The @keyframes Rule
The animation name above is glowing i.e., the @keyframes rule −
@-webkit-keyframes glowing {
}
Text-Shadow
To give an attractive look withing the animation rule, we have used the style for shadow i.e., the text-shadow property. The from and to keywords are used in the below example to set the beginning and end −
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(0, 0, 0);
font-family: cursive;
}
.glowing {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing 1s ease-in-out infinite alternate;
-moz-animation: glowing 1s ease-in-out infinite alternate;
animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
}
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>
267 Views
