Using text effects is always a good idea, as they make your Website attractive and interesting for the visitors. If you want to learn a new effect for your texts, read our snippet and create a shining text animation effect.
Now let’s dive in and create one together.
<p>Shine bright like a diamond.</p>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Impact, sans-serif;
font-size: 45px;
letter-spacing: 2px;
background: linear-gradient(90deg, #90EE90, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 5s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
Now let’s try some examples.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Impact, sans-serif;
font-size: 45px;
letter-spacing: 2px;
background: linear-gradient(90deg, #90EE90, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 5s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<p>Shine bright like a diamond.</p>
</body>
</html>
Shine bright like a diamond.
You can change the colors of your text with the help of the background property as you want but don’t change the degree as it’s responsible for the shining effect.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
p {
position: relative;
font-family: Geneva, sans-serif;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(90deg, #DC143C, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<p>Shiny text</p>
</body>
</html>