Animated Background Hero Template

Add a touch of modern sophistication to your site with a subtle, animated background.

This hero section uses pure CSS to create a calming effect of slowly drifting shapes, adding visual interest and a high-end feel without distracting from your core message.

Screenshot of a hero section with a subtle animated background of moving shapes.

Get Source Code Preview

About the Animated Background Hero

This template is ideal for creatives, agencies, and tech startups who want a modern look that feels alive but isn't overbearing. The slow-moving, semi-transparent shapes create a sense of depth and fluidity, elevating a simple hero section into something more memorable and polished.

Features

Pure CSS Animation: The entire effect is built with CSS, making it extremely lightweight, performant, and reliable. No JavaScript needed.
Subtle & Elegant: The animation is intentionally slow and non-intrusive, so it enhances the design rather than dominating it.
Fully Responsive: The centered content and background effect work perfectly on all screen sizes.
Customizable Shapes: Easily change the color, size, and number of floating shapes to match your brand's aesthetic.

Code Breakdown

The component is delivered as CSS for the head and HTML for the body of your page.

The main hero section has position: relative and overflow: hidden. The animation is created by an unordered list (ul class="floating-shapes") that sits as a sibling to the main content container. The list items within it are the floating shapes. They are positioned absolutely at the bottom of the container and given varying sizes and opacities.

A CSS animation defined with @keyframes is applied to the list items. This animation uses the transform property to move the shapes from their starting position (bottom: -150px) to the top of the container (top: -150px). Each list item has a different animation-delay and animation-duration to create the randomized, asynchronous floating effect. The content itself is given a higher z-index to ensure it always appears on top of the moving shapes.

Code

<style>
    :root {
        --abg-padding: 5rem 1.5rem;
        --abg-min-height: 450px;
        --abg-bg: linear-gradient(to right, #83a4d4, #b6fbff);
        --abg-text-color: #2c3e50;
        --abg-headline-color: #1a2a40;
    }
    .animated-bg-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        min-height: var(--abg-min-height);
        padding: var(--abg-padding);
        background-image: var(--abg-bg);
        width: 100%;
        position: relative;
        overflow: hidden; /* This is crucial */

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .animated-bg-hero * {
         box-sizing: border-box;
    }
    .animated-bg-hero-content {
        position: relative;
        z-index: 2;
        max-width: 700px;
    }
    .animated-bg-hero-title {
        color: var(--abg-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 700;
        line-height: 1.2;
    }
    .animated-bg-hero-subtitle {
        color: var(--abg-text-color);
        font-size: clamp(1.1rem, 3vw, 1.25rem);
        line-height: 1.6;
        margin: 0;
    }

/* Animated shapes styles */
    .floating-shapes {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        z-index: 1;
    }
    .floating-shapes li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: move-around 25s linear infinite;
        bottom: -150px;
    }
    .floating-shapes li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
    .floating-shapes li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
    .floating-shapes li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
    .floating-shapes li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
    .floating-shapes li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
    .floating-shapes li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
    .floating-shapes li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
    .floating-shapes li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
    .floating-shapes li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
    .floating-shapes li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes move-around {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
        }
    }
</style>

<section class="animated-bg-hero">
    <div class="animated-bg-hero-content">
        <h1 class="animated-bg-hero-title">Creativity in Motion</h1>
        <p class="animated-bg-hero-subtitle">
            A fluid approach to design and development, crafting experiences that are both beautiful and intuitive.
        </p>
    </div>
    <ul class="floating-shapes" aria-hidden="true">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

View Output