---
title: "WavyBackground — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Backgrounds. Animated fluid gradient wave background"
canonical: "https://framer.elliotli.dev/component/wavybackground"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/WavyBackground

# WavyBackground

Animated fluid gradient wave background

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

![WavyBackground preview image 1](https://framer.elliotli.dev/og/component/wavybackground/ae919a0601e64669/1600x1200.jpg)

## Summary

Animated fluid gradient wave background

## Description

Animated layered waves with customizable gradient colors, blur, opacity and speed. Continuous fluid motion that instantly elevates hero sections, landing pages, and portfolio sites with depth and energy.

## Features

-   Smooth layered wave animation with continuous motion
    
-   Unlimited gradient color customization
    
-   Wave width control for subtle or bold effects
    
-   Background color or transparent background support
    
-   Blur and opacity controls for depth and softness
    
-   Slow, medium and fast speed options
    
-   Fully responsive — desktop, tablet and mobile
    
-   No code needed — all controls in Framer panel
    

## Property Controls

**Colors** — gradient color array, background color

**Waves** — wave width, wave layers

**Effects** — blur intensity, opacity

**Animation** — speed control (slow, medium, fast)

## Use Cases

Hero sections · Landing pages · Portfolio sites · Event pages · Banners · SaaS homepages · Creative backgrounds · Coming soon pages

**SEO Keywords**

framer wave background · framer animated background · framer gradient background · framer background component · framer wave animation · framer fluid background · framer hero background · framer animated gradient · framer background effect · framer wavy background · framer motion background · framer landing page background · framer creative background · framer code component · framer gradient animation

Customization:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-anx3p476-700Omx1zTUdx9M6F9AsxBAd70d7zsD)

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

-   All · #8344

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-10-02
- **Updated**: 2026-04-08
- **Added**: 2025-09-27
- **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