HOW TO CREATE RESPONSIVE AND BEAUTIFULL TEXT GRADIENT ANIMATION WITH USI...

0 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;}}

Tags

HTML CSS HTML_CSS_WEBSITE TEXT-GRADIENT

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.