How to Create an Animated Gradient Background with Pure CSS in 2025

The creation of animated backgrounds has gained great relevance in modern web design, offering developers the opportunity to enhance the aesthetics of their pages with simple yet effective techniques. In this article, we will explore how to implement an animated gradient background using only CSS, resulting not only in an appealing visual effect but also optimizing performance by avoiding heavy images.

Introduction to Animated Gradient Background

Animated gradient backgrounds are a popular trend because they allow for smooth and visually pleasing transitions that capture the visitor's attention. These backgrounds are easy to implement using CSS and add a dynamic touch to any web design. Below, we will detail a basic example of how to achieve this using pure CSS code.

Implementing the HTML Code

The first step to create an animated background is to structure the HTML content. Below is a basic example that can be used as a starting point:

<div class="d-flex flex-column justify-content-center w-100 h-100">
    <div class="d-flex flex-column justify-content-center align-items-center">
        <h1 class="fw-light text-white m-0">Animated Gradient Background</h1>
        <div class="btn-group my-5">
            <a href="https://codepen.io/P1N2O/details/pyBNzX" target="_blank" class="btn btn-outline-light" aria-current="page">
                <i class="fas fa-circle-info me-2"></i> PEN DETAILS
            </a>
            <a href="https://codepen.io/P1N2O/full/pyBNzX" target="_blank" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
        </div>
        <a href="https://github.com/p1n2o" class="text-decoration-none">
            <h5 class="fw-light text-white m-0">— P1N2O —</h5>
        </a>
    </div>
</div>

This HTML block creates a basic structure with a main heading and two buttons that allow the user to explore more details about the project.

Styling with CSS

Now that we have the HTML base, the next step is to apply the CSS styles that will generate the animated background. Below is the necessary code to achieve the desired effect:

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Breakdown of CSS Code

1. Linear Gradient: The background property is used to apply a linear gradient that changes at different angles using specific colors such as #ee7752, #e73c7e, #23a6d5, and #23d5ab.
2. Background Animation: With background-size: 400% 400%, we ensure that the background has enough space to move during the animation. The use of animation: gradient 15s ease infinite; establishes a continuous animation that will repeat indefinitely.
3. Keyframes: The @keyframes gradient rule defines the key points of the animation. In this case, the background moves from the starting position to the right and back, generating a fluid effect.

Conclusions

Implementing an animated gradient background with pure CSS is an accessible process that can significantly enhance the appearance of a website. This approach not only provides an attractive visual effect but also keeps the content load light by eliminating the need for large images. With the code presented, developers have a solid foundation to start experimenting with their own styles and animations.

With each iteration, colors and animation duration can be adjusted to fit the desired aesthetics. Undoubtedly, this technique is a valuable tool in the arsenal of any web designer.

If you want to explore more about design and web development techniques, feel free to visit more articles on this blog.