Home / Typography / Gradient Text
Gradient Text CSS Template, Free with Live Demo
Free gradient text website template for a festival lineup. Artist names in warm sunset gradients that slowly shift, made with background-clip text. Live demo. The example is Sunset Sound, a festival lineup.
What is gradient text?
Gradient text fills words with a blend of colors instead of one flat color. Animate the gradient and the colors slowly flow through the letters, like a sunset moving across the sky.
The gradient is three times wider than the text, and an animation moves its position. That keeps it smooth and cheap for the browser, with no JavaScript.
Good for
- Festival and event lineups
- Hero headlines on dark sites
- Music and nightlife brands
- Big numbers and stats
What you get in this template
- Warm sunset gradient on every headliner
- Slow flowing color animation
- Lineup layout by day with support acts
- Dela Gothic One for bold festival type
- Animation stops for reduced motion
The key CSS
This is the part that makes the gradient text look work. Copy it into your own project.
.gt {
background: linear-gradient(90deg, #ffd166, #ff8c42, #ff3c7a, #b14aed, #ff8c42, #ffd166);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shift 10s linear infinite;
}
@keyframes shift { to { background-position: 300% 0; } }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make gradient text in CSS?
Set a linear gradient as the background, add background-clip: text and -webkit-background-clip: text, and make the text color transparent.
How do I animate a text gradient smoothly?
Make the background wider than the text with background-size: 300%, repeat the first color at the end, and animate background-position.
Does gradient text work for SEO?
Yes. It is still normal text in the HTML, so search engines read it as usual.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
053. Oversized Serif
Maison Clair, a boutique hotel
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
056. Image in Text
Alpenglow, a ski resort
058. Handwritten Accents
Nonna's Kitchen, a cooking school
059. Monospace
Byte Sized Weekly, a developer newsletter