{html code}
<html><head>
<link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>
<title>coloring effect</title>
</head>
<body>
<div class='text'>
<h2>coloring effect</h2>
</div>
</body>
</html>
{css code}
body{
background: rgb(0, 0, 0);
}
.text{
position: absolute;
top: 20%;
left: 10%;
color: transparent;
background-image: linear-gradient(to right, rgb(0, 174, 255), rgb(98, 0, 128), rgba(255, 192, 203, 0.651), yellow );
font-family: 'poppins', sans-serif;
font-size: 60px;
text-transform: uppercase;
-webkit-background-clip: text;
animation: animate 5s linear infinite;
background-size: 400%;
-webkit-text-stroke-width: 0.6px;
-webkit-text-stroke-color: yellow;
text-align: center;
}
@keyframes animate{
0%{
background-position: 0 80%;
}
50%{
background-position: 100% 0;
}
0%{
background-position: 0 100%;
}
}
visit the link for the output: click here
For Glowing Border visit link: click here
Comments
Post a Comment