Gradient Text Animation using HTML CSS
#cssanimation #cssgradient #gradient
Description:
I hope this tutorial will help you know a little bit in CSS
Source Code:
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Gradient Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="gradient">Gradient.</h1>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Pacifico', cursive;
font-size: 20px;
background: #EDDDD4;
}
.gradient {
/*background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);*/
background-image: linear-gradient(90deg, rgba(127,0,255,1) 0%, rgba(255,0,255,1) 56%, rgba(255,0,54,1) 100%);
color: transparent;
-webkit-background-clip: text;
animation: grad-text 1s infinite;
}
@keyframes grad-text {
50% {
background-image: linear-gradient(262deg, rgba(127,0,255,1) 0%, rgba(255,0,255,1) 56%, rgba(255,0,54,1) 100%);
}
}