Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
<!--Created by CodingPorium,2021. Visit codingporium.blogspot.com or search for CodingPorium on YouTube with no spaces. -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Animated Text Effect using CSS | CodingPorium</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
}
html,body{
display: grid;
height:100%;
place-items:center;
}
.gradient-text{
font-weight:700;
font-size:50px;
outline:none;
text-transform: uppercase;
background: linear-gradient(135deg, #40c9ff 0%, #e81cff 25%, #4d0af7 50%,#e81cff 75%,#40c9ff 100%);
background-size: 400%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:animate 10s linear infinite;
}
@keyframes animate{
to{
background-position: 400%;
}
}
</style>
<body>
<div spellcheck="false" class="gradient-text"contenteditable="true">
CodingPorium
</div>
</body>
</html>
Post a Comment