---
title: "Liquid Neon WebGL — Free Framer component · Best of Framer"
description: "Free Framer component · by Sirrah Space · Backgrounds. Give your Framer website a luxurious, futuristic upgrade with the Liquid Neon WebGL background."
canonical: "https://framer.elliotli.dev/component/liquid-neon-webgl"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Liquid Neon WebGL

# Liquid Neon WebGL

Interactive 3D fluid neon backgrou

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

![Liquid Neon WebGL preview image 1](https://framer.elliotli.dev/og/component/liquid-neon-webgl/3ec5f2d35ee9a183/1600x1200.jpg)

## Summary

Give your Framer website a luxurious, futuristic upgrade with the Liquid Neon WebGL background.

## Description

Give your Framer website a luxurious, futuristic upgrade with the **Liquid Neon WebGL** background. Built on high-performance GLSL shaders, this component renders a deep, atmospheric 3D fluid surface illuminated by vibrant neon lights. The fluid organically morphs and flows, creating rich, glossy specular highlights that make your page feel alive.

Designed for maximum engagement, the liquid surface is highly interactive—it ripples, pushes, and warps naturally in response to both mouse movements and touch gestures. You have complete creative control: adjust the complexity of the waves, dial in the glossiness, and blend three distinct neon accent colors over a dark canvas to perfectly match your brand. Engineered for modern web standards, it includes a smart Intersection Observer that automatically pauses rendering when off-screen, ensuring zero impact on device battery or CPU.

**Functions (Key Features):**

-   🌊 **3D Fluid Dynamics:** Simulates a rich, glossy liquid surface with complex, continuous wave distortions.
    
-   🖱 **Interactive Ripples:** The fluid naturally displaces and ripples in real-time as users move their cursor or touch the screen.
    
-   🎨 **Neon Color Blending:** Mix three distinct accent colors (Primary, Secondary, Ambient) to create stunning, vibrant specular highlights.
    
-   🎛 **Deep Customization:** Fine-tune the wave complexity, distortion amount, animation speed, and surface glossiness.
    
-   🚀 **Smart Performance:** Pure GPU-accelerated WebGL rendering with an automatic pause mechanism when scrolled out of view.
    

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

-   All · #3746

## Details

- **Author**: Sirrah Space
- **Published**: 2026-06-26
- **Updated**: 2026-06-26
- **Added**: 2026-06-26
- **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