Animated Text Gradient

Developer
Colt Borg
Size
2,728 Kb
Views
16,192
  1. Animated Text Gradient Previews
  2. Animated Text Gradient HTML Codes
  3. Animated Text Gradient CSS Codes
  4. Animated Text Gradient JS Codes

How do I make an animated text gradient?

Inspiration from https://www.virginamerica.com/mobile. What is a animated text gradient? How do you make a animated text gradient? This script and codes were developed by Colt Borg on 21 November 2022, Monday.

Animated Text Gradient Previews
IQ Test

Animated Text Gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Text Gradient</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lora:700|Scope+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="c-article"> <header class="c-article__header"> <h1 class="c-article__title"> What's better than text gradients? <br> <span class="u-font-lora">Animated text gradients.</span> </h1> </header>
</article> <script src="js/index.js"></script>
</body>
</html>

Animated Text Gradient - Script Codes CSS Codes

@-webkit-keyframes animationgradienttitle { 0% { background-position: 0 1600px; } 100% { background-position: 1600px 0; }
}
@keyframes animationgradienttitle { 0% { background-position: 0 1600px; } 100% { background-position: 1600px 0; }
}
body { background-color: #2F3C4F;
}
h1 { margin: 0;
}
.c-article { margin-top: 10rem; text-align: center;
}
.c-article__header { position: relative;
}
.c-article__title { font-family: 'Scope One', serif; font-size: 3em; color: #fc3735; background: -webkit-linear-gradient(left, #F57170, #10DDC2, #F57170); background-size: 1600px 200px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-name: animationgradienttitle; animation-name: animationgradienttitle; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.u-font-lora { font-family: 'Lora', serif; font-size: 1.5em; font-weight: 700;
}

Animated Text Gradient - Script Codes JS Codes

// Inspiration from https://www.virginamerica.com/mobile ✈️
Animated Text Gradient - Script Codes
Animated Text Gradient - Script Codes
Home Page Home
Developer Colt Borg
Username legendofcolt
Uploaded November 21, 2022
Rating 3.5
Size 2,728 Kb
Views 16,192
Do you need developer help for Animated Text Gradient?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Colt Borg (legendofcolt) Script Codes
Name
Palantir Support HTML
Halloween Greeting - CodePen Chicago
Quote Footer
Dynamic Point Mesh Animation Exercise
Triangle Image Gallery
Full Width Gallery
Vertical Rhythm with H.G. Wells
Fixed Bottom Nav
Pill Logo
Sliding Underline using CSS
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!