🌈 How to Create a 3-Color Gradient Background Animation Using HTML and CSS (With Source Code)

ArjunArjun
5 min read

Table of contents

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:

https://youtu.be/qqxee109L7I

🧱 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 header with a logo and navigation links.

  • A section.hero that displays a motivational quote and a paragraph.

  • The body tag has the class top which 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-size is much larger than the element size to allow for smooth transitions.

  • The animation gradient-animation loops 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!>

12
Subscribe to my newsletter

Read articles from Arjun directly inside your inbox. Subscribe to the newsletter, and don't miss out.

gradient-animationHTML CSS UIhero section animationHTML5CSS3gradients in CSSAnimating Gradientshtml, cssHTML CSS Projecthero sectionkeyframesKeyframe Animations

Written by

Arjun
Arjun

Just a GEEK 🤓 I explore new tech every now and then. 🚀💻