🌈 How to Create a 3-Color Gradient Background Animation Using HTML and CSS (With Source Code)
If you're just starting with web development and want to add eye-catching visual effects to your projects, animated gradients are a fun and beginner-friendly way to get started. In this tutorial, we'll learn how to create a beautiful 3-color gradient background animation using HTML and CSS — no JavaScript required!
You’ll not only learn how to create a gradient, but also how to animate it using @keyframes. We’ll go step-by-step, explaining each line of code, and by the end of this post, you’ll have a cool animated background to use in your own projects.
🎯 What is a Gradient in CSS?
A gradient is a visual effect where one color gradually transitions into another. CSS provides linear-gradient and radial-gradient functions to create these effects. In this tutorial, we’ll use a linear gradient with three different colors to make our background dynamic and colorful.
📦 What You’ll Need
Basic knowledge of HTML and CSS
Any code editor (like VS Code, Sublime Text, etc.)
A modern web browser
🎥 Watch the Video Tutorial
Prefer learning by watching? Check out the full step-by-step walkthrough on YouTube! In this video, I’ll show you how to build the entire 3-color gradient animation from scratch and explain every part in simple terms — perfect for beginners!
👉 Click play below to watch the tutorial:
🧱 HTML + CSS 3-Color Gradient Animation – Full Source Code
Here is the complete code we’ll build in this tutorial. You can copy and paste it into your code editor to see it in action.
📄 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated 3-Color Gradient</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="top">
<header>
<div class="logo">
<span>nebula</span>
</div>
<nav class="links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="hero">
<p>Discipline Will Take You</p>
<p>Places Motivation Can't</p>
<p class="lines">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad ratione, quas mollitia doloribus explicabo?</p>
</section>
</body>
</html>
🎨 style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
body {
max-width: 900px;
margin: 0 auto;
padding: 0;
background-color: #f3f3f3;
font-family: 'Poppins', sans-serif;
}
.top {
background: linear-gradient(56deg, #062c8f, #ff6a8e, #c3c3c3 );
background-size: 200% 340%;
animation: gradient-animation 27s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 1rem 0rem;
padding: 1rem 1rem;
}
.logo span {
color: #c4ff22;
font-size: 3rem;
}
.links {
display: flex;
align-items: center;
justify-content: center;
margin-right: 4.5rem;
}
.links a {
color: #c4ff22;
text-decoration: none;
font-size: 1.5rem;
margin: 0 1rem;
}
p {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #000000;
font-size: 3rem;
margin-top: 2rem;
font-weight: 700;
margin: 0;
}
.lines {
display: flex;
margin: 1rem auto;
width: 60%;
text-align: center;
font-size: 1rem;
}
🧠 Explaining the Code Step-by-Step
Let’s break down what each part of this code does and how the gradient animation works.
1. HTML Structure
A
headerwith a logo and navigation links.A
section.herothat displays a motivational quote and a paragraph.The
bodytag has the classtopwhich applies the gradient background animation.
2. Font Import
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
We use Google Fonts to import the stylish and readable Poppins font.
3. Gradient Background Setup
.top {
background: linear-gradient(56deg, #062c8f, #ff6a8e, #c3c3c3 );
background-size: 200% 340%;
animation: gradient-animation 27s ease infinite;
}
The gradient moves at a 56-degree angle.
It uses three colors: deep blue (
#062c8f), soft pink (#ff6a8e), and light gray (#c3c3c3).The
background-sizeis much larger than the element size to allow for smooth transitions.The animation
gradient-animationloops infinitely over 27 seconds.
4. CSS Keyframes Animation
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This keyframe animation changes the background position to create a smooth left-to-right gradient transition and then resets.
✨ Why Use Animated Gradients?
Animated gradients add a modern and dynamic look to your website. They are perfect for:
Hero sections
Landing pages
Backgrounds for headers or footers
Fullscreen intros
They grab attention without being too overwhelming and can help your site stand out.
🛠️ Customize It Your Way
Want to make it your own? Here are a few customization ideas:
Change the colors to match your brand palette
Adjust the animation duration for faster or slower transitions
Use a radial-gradient for circular patterns
Add overlay content like buttons or CTAs
📱 Is It Responsive?
Yes! Since the background is applied to the <body> and the layout uses flexible containers, this design will adapt to different screen sizes.
🚀 Final Thoughts
Creating an animated 3-color gradient using only HTML and CSS is a fantastic way for beginners to explore the power of CSS animations and modern web design. It’s simple, visually appealing, and can be used in real-world projects like portfolios, landing pages, or blog headers.
🔗 Want to See It in Action?
Try the full demo in your browser or embed it on your site for a clean, animated aesthetic. You can also enhance it further with JavaScript interactivity or use it as a background for a form or interactive element.
💬 Have Questions?
Drop a comment below or reach out on social media! I’d love to see what you create with this effect.
<Echo!>
