---
title: "Floating Animation — Free Framer component · Best of Framer"
description: "Free Framer component · by 7D-Web Expert · Backgrounds. Floating Gradient Background"
canonical: "https://framer.elliotli.dev/component/floating-animation"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Floating Animation

# Floating Animation

Floating Gradient Background

[View on Framer](https://framer.com/marketplace/components/floating-animation/?via=elliot-li)

![Floating Animation preview image 1](https://framer.elliotli.dev/og/component/floating-animation/a1fb6e3d17a2e954/1600x1200.jpg)

## Summary

Floating Gradient Background

## Description

Infinite floating wave animation moving from top to bottom. Softness and speed variables allow you to control the animation pace, while the softness setting determines how much blending appears on the screen. Background and wave colors are fully customizable. Built as a code component, Optimized for smooth performance and easy integration into any layout.

**Use cases:**

-   Hero headers and intro sections
    
-   Backgrounds for landing pages, portfolios, and tech/AI/SaaS themes
    
-   Preloaders and inter-section transitions
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-kegj3wat-DedORRuSjFFgHDo9TD29t4BoiGndyx)

## Rank history [How rankings work →](/terms#rankings)

-   All · #602

## Details

- **Author**: 7D-Web Expert
- **Published**: 2026-02-19
- **Updated**: 2026-03-01
- **Added**: 2026-01-11
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background