---
title: "Shader Backgrounds — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Backgrounds. Animated liquid glass backgrounds"
canonical: "https://framer.elliotli.dev/component/shader-backgrounds"
---

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

# Shader Backgrounds

Animated liquid glass backgrounds

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

![Shader Backgrounds preview image 1](https://framer.elliotli.dev/og/component/shader-backgrounds/8d3a040c3bd1a30c/1600x1200.jpg)

## Summary

Animated liquid glass backgrounds

## Description

................................................................................................

## Add Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ectn8thw-7b1PJqGkGxVCbwcjGww89DIM89TglR)](https://www.framer.com/marketplace/components/liquid-glass-logo/)

## Where to use:

Say goodbye to flat, boring hero sections. This high-end WebGL component is built to instantly elevate your site's perceived value. It is incredibly effective for:

-   **Hero Sections:** Grab your visitors' attention the millisecond they land on your page with premium, silky 3D motion.
    
-   **Creative Portfolios & Agencies:** Showcase your cutting-edge aesthetic and technical capabilities without writing a single line of code.
    
-   **SaaS Landing Pages:** Add a modern, tech-forward background that adds immense depth while letting your core typography and call-to-action buttons pop.
    

## Main Features:

-   **4 Distinct 3D Shapes:** Seamlessly toggle between Diagonal, Vertical, Corrugated, or Sweeping Fold styles to find the perfect geometric flow for your layout.
    
-   **Unlimited Color Control:** Fully integrated with Framer's property panel. Create your own custom iridescent palettes by tweaking the core, inner bands, and edge highlight colors.
    
-   **High-Performance WebGL:** Built with optimized Three.js and custom GLSL shaders. Delivers silky-smooth 60fps animations that look stunning on any device.
    
-   **Smart Viewport Optimization:** Automatically pauses the animation when scrolled out of view, ensuring your website remains lightning-fast and battery-friendly.
    

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

-   All · #1223

## Details

- **Author**: Saadat Ali
- **Published**: 2026-06-11
- **Updated**: 2026-09-08
- **Added**: 2026-05-19
- **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