7 Amazing CSS Gradient Text Animation Effects in Html CSS
Text Gradient Effects 1
Html:
<h1 class="shimmer">CSS Gradient Animation</h1>
CSS:
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
body {
background: #000;
}
.shimmer {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 2.4em;
margin: 0 auto;
padding: 0 0 0 0;
display: inline;
margin-bottom: 0;
}
p {
font-weight: 300;
font-size: 0.8em;
color: rgba(255,255,255,0.65);
width: 500px;
text-align: justify;
line-height: 1.5em;
border-top: 1px dashed rgba(255,255,255,0.2);
margin: 10px 0 0 5px;
padding-top: 10px;
}
p a {
text-decoration: none;
color: #fff;
}
p a:visted {
color: #fff;
}
.shimmer {
text-align: center;
color: rgba(255,255,255,0.1);
background: #ed8080; /* Old browsers */
background: -moz-linear-gradient(left, #ed8080 0%, #2a77d6 16%, #5eb524 32%, #eacd25 48%, #ed8080 64%, #2a77d6 80%, #5eb524 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed8080), color-stop(16%,#2a77d6), color-stop(32%,#5eb524), color-stop(48%,#eacd25), color-stop(64%,#ed8080), color-stop(80%,#2a77d6), color-stop(100%,#5eb524)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* IE10+ */
background: linear-gradient(to right, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8080', endColorstr='#5eb524',GradientType=1 ); /* IE6-9 */
-webkit-background-size: 300% 300%;
-moz-background-size: 300% 300%;
background-size: 300% 300%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
animation:shimmer infinite 3s linear;
-o-animation:shimmer infinite 3s linear;
-moz-animation:shimmer infinite 3s linear;
-webkit-animation:shimmer infinite 3s linear;
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@-moz-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-webkit-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-o-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
- - - - - - - - - - -
Text Gradient Effects 2
Html:
<h1>Lovely Gradient</h1>
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body{
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size:42px;
text-transform:uppercase;
color: transparent;
background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
background-size: 1000px 100%;
animation: bg 15s linear infinite;
background-clip: text;
-webkit-background-clip: text;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes bg {
0% {
background-position-x: 0;
}
100% {
background-position-x: 10000px;
}
}
- - - - - - - - - - -
Text Gradient Effects 3
Html:
<header>
<h1>smooth gradient</h1>
</header>
CSS:
body {
margin: 0 auto;
font-family: "Open Sans", sans-serif;
background-color: hsl(0, 0%, 97%);
}
header {
height: calc(100vh - 1px);
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
header h1 {
font-weight: 700;
background-image: linear-gradient(
90deg,
hsl(0, 90%, 70%),
hsl(45, 90%, 70%),
hsl(90, 90%, 70%),
hsl(135, 90%, 70%),
hsl(180, 90%, 70%),
hsl(225, 90%, 70%),
hsl(270, 90%, 70%),
hsl(315, 90%, 70%),
hsl(360, 90%, 70%)
);
background-size: 400%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
50% {
background-position: 100%;
}
100% {
background-position: 0%;
}
}
- - - - - - - - - - -
Text Gradient Effects 4
Html:
<h1>Gradient Text</h1>
CSS:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
text-transform: uppercase;
font-size: 72px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: linear-gradient(
180deg,
#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;
}
}
- - - - - - - - - - -
Text Gradient Effects 5
Html:
<h1 class="gradient-text">I ❤ Gradient</h1>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
body{
background-color: #1a1a1a;
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Poppins', sans-serif;
}
.gradient-text{
animation: gradient 3s linear infinite;
font-size: 60pt;
background: -webkit-linear-gradient(15deg, #4474E4, #D525E3 , #4474E4, #D525E3 );
background-size: 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes gradient {
from{
background-position: 100% 0%;
}
to{
background-position: 0% 0%;
}
}
- - - - - - - - - - -
Text Gradient Effects 6
Html:
<h1 class="header">CSS Gradient Text</h1>
CSS:
html {
background: #1d1f20;
margin: 0 4rem;
}
.header {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3rem;
/*font-size: 6rem;*/
font-weight: 700;
letter-spacing: 2px;
text-align: center;
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 1s infinite linear;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
- - - - - - - - - - -
Text Gradient Effects 7
Html:
<div class="center">
<h1>Gradient Text</h1>
</div>
CSS:
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
}
.center{
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.center h1{
color: rgba(255,0,0,0.1);
font-size: 100px;
text-transform: uppercase;
font-weight: 700;
background-size: cover;
background-image: url(https://cdn-images-1.medium.com/max/2000/1*Jalb56N34pBIGCjQULtW3A.jpeg);
-webkit-background-clip: text;
animation: background-text-animation 15s linear infinite;
}
@keyframes background-text-animation {
0%{
background-position: left 0px top 50%;
}
50%{
background-position: left 1500px top 50%;
}
100%{
background-position: left 0px top 50%;
}
}
- - - - - - - - - - -