---
title: "Fluid Scroll Shader — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Make your website unforgettable with the Fluid Scroll Shader."
canonical: "https://framer.elliotli.dev/component/fluid-scroll-shader"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Fluid Scroll Shader

# Fluid Scroll Shader

Scroll-driven WebGL color gradient

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

![Fluid Scroll Shader preview image 1](https://framer.elliotli.dev/og/component/fluid-scroll-shader/228548319d47a1bb/1600x1200.jpg)

## Summary

Make your website unforgettable with the Fluid Scroll Shader.

## Description

Make your website unforgettable with the **Fluid Scroll Shader**. This premium **WebGL component** renders a silky-smooth, animated color flow directly on the GPU. Unlike static CSS gradients, it features organic mathematical blending and a built-in cinematic grain overlay for a highly polished, modern aesthetic.

The true power lies in its scroll-driven capabilities: define multiple color "Stages", and watch as the gradient seamlessly morphs into new palettes as the user scrolls down your landing page. It calculates transitions based on viewport height (vh), making it the perfect atmospheric backdrop for SaaS sites, creative portfolios, and long-form editorial pages.

**Functions (Key Features):**

-   📜 **Scroll-Linked Colors:** Seamlessly interpolates between unlimited 4-color palettes based on the user's scroll depth.
    
-   ⚡ **WebGL Powered:** Renders complex blending math and grain effects at a buttery-smooth 60fps.
    
-   🎞️ **Cinematic Grain:** Built-in, customizable noise overlay for a textured, premium look.
    
-   🌊 **Fluid Motion:** Colors drift and blend organically with adjustable animation speed.
    
-   📏 **Stage Control:** Define the scroll height (in vh) for each color stage to perfectly match your page layout.
    

**How to Use:**

1.  **Insert:** Place the **Fluid Scroll Shader** component as your page background (Set Width/Height to Fill or 100vh with Position: Fixed).
    
2.  **Add Stages:** In the properties panel, edit the **Stages**. Add a new stage for each visual section of your page.
    
3.  **Colors:** Pick 4 colors (Color 1 to Color 4) for each stage to define its unique palette.
    
4.  **Height (vh):** Set the Height for each stage (e.g., setting it to 100 means it will take one full screen scroll to transition to the next palette).
    
5.  **Texture & Motion:** Adjust the **Speed** of the organic movement and dial in the **Grain** intensity for a textured finish.
    

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

-   All · #8169

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-03-04
- **Updated**: 2026-07-26
- **Added**: 2026-02-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