---
title: "ShaderBG — Free Framer component · Best of Framer"
description: "Free Framer component · by Rivii · Backgrounds. Description ShaderBG renders a continuously animated gradient pattern directly in the browser using WebGL."
canonical: "https://framer.elliotli.dev/component/shaderbg"
---

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

# ShaderBG

An animated shader background.

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

![ShaderBG preview image 1](https://framer.elliotli.dev/og/component/shaderbg/06da4daacda7e879/1600x1200.jpg)

## Summary

Description ShaderBG renders a continuously animated gradient pattern directly in the browser using WebGL.

## Description

A living, animated shader background for your hero sections - no video files, no Lottie exports, just a lightweight WebGL canvas that drifts and glows in real time.

## Description

ShaderBG renders a continuously animated gradient pattern directly in the browser using WebGL. Drop it behind any hero, header, or feature section and stack your own text, buttons, or layout on top. Fully responsive, GPU-accelerated, and tunable without touching a single line of code.

## Features

-   Real-time WebGL shader animation, no video or image assets required
    
-   Adjustable Speed, Scale, and Glow to shape the motion and intensity
    
-   RGB Tint control to shift the color palette to match your brand
    
-   Device pixel ratio cap for performance on high-density displays
    
-   Custom clear color for light or dark canvas bases
    
-   Fills any frame - resize freely, fully responsive
    

## Use cases

-   SaaS and AI product landing page heroes
    
-   Portfolio and agency intro sections
    
-   Event or launch pages that need a "living" feel
    
-   Backgrounds for pricing, CTA, or newsletter sections
    

## Notes

Best used as a background layer with content stacked above it in the layer panel. Works on any dark or light base; use the Tint and Clear Color controls to match your site's palette.

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

-   All · #3369

## Details

- **Author**: Rivii
- **Published**: 2026-07-27
- **Updated**: 2026-07-27
- **Added**: 2026-07-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