YouTube Video Link: Animated Gradient Text using HTML CSS
Html CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
background: #333;
text-align: center;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 15vw;
}
.linear-wipe {
text-align: center;
background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 1s linear infinite;
animation: shine 1s linear infinite;
}
@-webkit-keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes shine {
to {
background-position: 200% center;
}
}
</style>
</head>
<body>
<h1 class="linear-wipe">Blink Coders!</h1>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
gradient text animation, css text gradient, gradient text, css gradient, animated gradient text css, gradient, animated gradient text, gradient text css, css gradient text, css gradient text animation, how to animate text color using css gradient, gradient animation, gradient text animation css, gradient text effect, gradient text animation using css, gradient text animation effect, css linear gradient, text animation using css, animated rainbow gradient text
Post a Comment