---
title: "Color Blend Gradient — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Iaroslav · Backgrounds. Interactive silky color gradient waves"
canonical: "https://framer.elliotli.dev/component/color-blend-gradient"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Color Blend Gradient

# Color Blend Gradient

Interactive silky color gradient waves

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

![Color Blend Gradient preview image 1](https://framer.elliotli.dev/og/component/color-blend-gradient/68d31d12c6c48157/1600x1200.jpg)

## Summary

Interactive silky color gradient waves

## Description

**Color Bend** is an interactive shader background that generates smooth “color ribbons” in real time. It creates a living gradient field that subtly shifts, reacts to pointer movement, and adds depth through controlled warp and parallax — ideal for hero sections, banners, cards, and editorial covers.

Exmples

## WebGL shader (Three.js)

The component renders a single full-bleed plane with a custom fragment shader. Everything is procedural: **no images, no videos, no exports** — just parameters you tweak in Framer.

## Palette & transparency

-   **Colors (up to 8)** — define the palette that blends into the bend layers.
    
-   **Transparent** — outputs clean alpha for easy layering on top of any background. Great for stacking with typography or UI blocks.
    

## Composition & orientation

-   **Rotation** — sets the base angle of the bends.
    
-   **Auto Rotate** — adds continuous ambient rotation for a “always alive” feel, without changing layout.
    

## Pattern & distortion

-   **Scale** — zooms the pattern in/out (bigger, softer bends vs. tighter structure).
    
-   **Frequency** — changes the bend density and detail level.
    
-   **Warp** — controls distortion strength, from clean minimal flow to more expressive motion.
    

## Interaction

-   **Parallax** — shifts the pattern with the pointer to create depth.
    
-   **Mouse Influence** — pulls the field toward the cursor for a more “reactive” surface.
    
-   **Pointer Smooth** — softens pointer tracking to avoid jitter and keep motion premium.
    

## Texture & rendering

-   **Noise** — adds refined film-style grain to reduce “digital banding” and make gradients feel more tactile.
    
-   **Max DPR** — caps device pixel ratio for performance control on high-DPI screens.
    

## Editor behavior

-   **Render in Canvas** — toggles rendering inside the Framer editor canvas (useful to keep the editor lightweight when you have multiple shader components on the page).
    

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

-   All · #6407

## Details

- **Author**: Iaroslav
- **Price**: $3.00
- **Published**: 2026-02-18
- **Updated**: 2026-04-18
- **Added**: 2026-02-17
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background