---
title: "Aqua Flow Gradient — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Dive into a refreshing visual experience with Aqua Flow Gradient."
canonical: "https://framer.elliotli.dev/component/aqua-flow-gradient"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Aqua Flow Gradient

# Aqua Flow Gradient

Realistic water caustic gradient.

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

![Aqua Flow Gradient preview image 1](https://framer.elliotli.dev/og/component/aqua-flow-gradient/dae79cfbae46f099/1600x1200.jpg)

## Summary

Dive into a refreshing visual experience with Aqua Flow Gradient.

## Description

Dive into a refreshing visual experience with **Aqua Flow Gradient**. This premium **WebGL component** uses complex sine-wave mathematics to generate realistic **water caustics** (light patterns) blended with a deep, immersive **color gradient**.

Unlike heavy video backgrounds, this generative shader renders crisp, non-repeating ripples directly on the GPU. It is the perfect atmospheric backdrop for **travel sites**, **wellness apps**, or summer campaigns. You have total control over the **depth gradient**, allowing you to blend from a deep abyss color to a sun-kissed surface hue smoothly.

**Functions (Key Features):**

-   🌊 **Caustic Simulation:** Mathematical shader logic creates organic, sunlight-dappled water patterns.
    
-   🎨 **3-Stop Gradient:** Seamlessly blends Deep, Mid, and Shallow colors to simulate realistic water depth.
    
-   ⚡ **GPU Rendering:** Runs natively in WebGL for 60fps performance without the artifacts of video loops.
    
-   ✨ **Specular Highlights:** Automatically generates bright, sparkling ridges where the "waves" intersect.
    
-   🎛️ **Fluid Control:** Adjust Flow Speed and Ripple Intensity to switch between a calm pool and a choppy sea.
    

**How to Use:**

1.  **Insert:** Drag the **Aqua Flow Gradient** component onto your canvas.
    
2.  **Sizing:** Set Width and Height to **"Fill" (100%)** for a fully immersive background.
    
3.  **Gradient:** Define your water depth. Use dark teal for Deep Color, bright cyan for Mid Color, and near-white for Shallow Color.
    
4.  **Motion:** Adjust **Flow Speed**. Lower values (0.1) look like a lazy pool; higher values (0.5+) look like a flowing river.
    
5.  **Detail:** Use **Ripples (Intensity)** to control the contrast of the light patterns on the water.
    

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

-   All · #7714

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-02-11
- **Updated**: 2026-07-26
- **Added**: 2026-02-02
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background