HOW TO CREATE RESPONSIVE AND BEAUTIFULL TEXT GRADIENT ANIMATION WITH USI...
HTML And CSS Cooding
August 22, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<h1>Gradient Text</h1>
</body>
</html>
CSS SOURCE CODE
*, :before,
:after {
margin: 0;
padding: 0;
box-sizing: border-box;}
body {height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(270deg,#fd004c,#fe9000,
#fff020,#3edf4b,#3363ff,#b102b7,#fd004c);
}
h1{text-transform: uppercase;
font-size: 72px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: linear-gradient(360deg,#fd004c,#fe9000,
#fff020,#3edf4b,#3363ff,#b102b7,#fd004c);
background-size: 200% 200%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: change 5s ease-in-out infinite;}
@keyframes change {
0% {background-position: 0 0;}
50% {background-position: 0 100%;}
100% {background-position: 0 0;}}
@media(max-width:576px){
h1{font-size:32px;}}
