---
title: "Acrylic Shader Fluid — Free Framer component · Best of Framer"
description: "Free Framer component · by Shivani Das · Backgrounds. Acrylic Shader Fluid - Gradient Background Inject high-end visual depth into your designs with the Acrylic Shader background."
canonical: "https://framer.elliotli.dev/component/acrylic-shader-fluid"
---

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

# Acrylic Shader Fluid

Gradient Background

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

![Acrylic Shader Fluid preview image 1](https://framer.elliotli.dev/og/component/acrylic-shader-fluid/a693101f3c2a30cd/1600x844.jpg)

## Summary

Acrylic Shader Fluid - Gradient Background Inject high-end visual depth into your designs with the Acrylic Shader background.

## Description

## **Acrylic Shader Fluid - Gradient Background**

Inject high-end visual depth into your designs with the **Acrylic Shader** background. Utilizing raw WebGL, this component renders an organic, silk-smooth liquid gradient backdrop that warps and swirls dynamically in reaction to cursor hover and touch movements.

## **Key Features**

-   🎨 **Vibrant Preset Themes:** Select from premium built-in palettes (`Midnight Aurora`, `Jade Forest`, `Crimson Nova`, or `Frost Wave`) to immediately elevate your page aesthetic.
    
-   🎛 **Dual-Mode Color Setup:** Use the presets out-of-the-box, or toggle **Custom Colors** to expose four independent color picker inputs and design your own color spectrum.
    
-   🖱 **Interactive Pointer Swirl:** Creates realistic fluid distortion (swirl, push force, and inertia trailing speed) that warps the gradients organically around the cursor.
    

## **Customizable Properties**

-   **Custom Colors Toggle:** Toggle between dynamic presets and individual color overrides.
    
-   **Preset Palette:** Select your background theme palette.
    
-   **Colors 1–4:** Customize individual color overrides when custom colors are active.
    
-   **Animation Speed:** Control the flow rate of the background wave animations.
    
-   **Pointer Sensitivity & Swirl/Push Strength:** Fine-tune how strongly the fluid ripples bend and push around the cursor.
    
-   **Density:** Control the density of the fluid ripples to adjust the frequency of micro-folds in the gradient.
    
-   **Vignette Strength:** Control the depth of the edge shadows blending into the page.
    

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

-   All · #5768

## Details

- **Author**: Shivani Das
- **Published**: 2026-07-22
- **Updated**: 2026-07-22
- **Added**: 2026-07-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