---
title: "Liquid Aura Gradient — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Immerse your users in a mesmerizing visual experience with Liquid Aura Gradient."
canonical: "https://framer.elliotli.dev/component/liquid-aura-gradient"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Liquid Aura Gradient

# Liquid Aura Gradient

Fluid holographic noise shader.

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

![Liquid Aura Gradient preview image 1](https://framer.elliotli.dev/og/component/liquid-aura-gradient/93103c94aa7c668c/1600x1200.jpg)

## Summary

Immerse your users in a mesmerizing visual experience with Liquid Aura Gradient.

## Description

Immerse your users in a mesmerizing visual experience with **Liquid Aura Gradient**. Powered by **WebGL** and custom shaders (GLSL), this component renders organic, **fluid color transitions** that look like moving oil or a digital aurora.

Unlike heavy video backgrounds, this generative shader runs smoothly on the GPU. It utilizes **domain warping** algorithms (Simplex Noise) to create complex, non-repeating patterns. It is the ultimate background solution for **Web3 interfaces**, **AI landing pages**, and high-end creative portfolios looking for that "ethereal" or **holographic** aesthetic.

**Functions (Key Features):**

-   ⚡ **WebGL Powered:** Renders natively on the GPU for buttery-smooth 60fps performance without video compression artifacts.
    
-   🌈 **4-Point Blending:** Mixes four distinct colors to create deep, rich gradients that shift organically.
    
-   🌀 **Domain Warping:** Uses advanced noise algorithms to create fluid, swirling distortions unique to shaders.
    
-   🌫️ **Softness Control:** Integrated Blur property allows you to go from sharp liquid details to a soft, dreamy aura.
    
-   ⏱️ **Adjustable Flow:** Control the Speed of the animation to match your site's energy, from calm ambient to fast-paced.
    

**How to Use:**

1.  **Insert:** Drag the **Liquid Aura Gradient** component onto your canvas.
    
2.  **Sizing:** Set Width and Height to **"Fill" (100%)** to use it as a full-screen background.
    
3.  **Colors:** Assign the **4 Color** inputs (e.g., Cyan, Pink, Orange, Purple) to match your brand palette.
    
4.  **Mood:** Adjust the **Speed** (0.5 for slow, 2.0 for energetic) and **Blur** (increase to remove noise grain and make it softer).
    
5.  **Layering:** Place white text or glass-morphism cards on top for a stunning modern contrast.
    

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

-   All · #7810

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-01-29
- **Updated**: 2026-07-26
- **Added**: 2026-01-22
- **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