---
title: "Mesh Gradient Effect — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Backgrounds. Flowing mesh gradient background"
canonical: "https://framer.elliotli.dev/component/mesh-gradient-effect"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Mesh Gradient Effect

# Mesh Gradient Effect

Flowing mesh gradient background

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

![Mesh Gradient Effect preview image 1](https://framer.elliotli.dev/og/component/mesh-gradient-effect/b75264f1885032ae/1600x1200.jpg)

## Summary

Flowing mesh gradient background

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

A living, flowing mesh gradient background — up to 10 color spots drifting along organic trajectories, warped by noise and swirl distortion. Way more alive than a static CSS gradient, and lighter than a video loop.

**Features**

-   Up to 10 color spots — build rich, multi-color flowing gradients instead of a flat 2-3 color blend
    
-   Organic distortion — noise-based warping keeps the shape from ever looking mechanical or repetitive
    
-   Swirl control — add vortex-style motion for a more dynamic, twisting flow
    
-   Fully animated — smooth, continuous motion by default, with full control over speed
    
-   Freeze-frame capable — set speed to 0 and use frame to lock the gradient on a single static state
    
-   Grain layer — mix grain into the shape edges or add a full post-processing grain overlay
    
-   Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance
    

**Controls**

-   Colors
    
-   Distortion
    
-   Swirl
    
-   Grain Mixer
    
-   Grain Overlay
    
-   Speed
    
-   Frame
    
-   Scale / Rotation / Offset
    

**How to use**

1.  Add the Mesh Gradient component onto your canvas
    
2.  Add up to 10 colors to build your gradient palette
    
3.  Adjust Distortion and Swirl until the flow feels right — low values stay calm and soft, higher values get more vortex-like
    
4.  Set Speed to control how fast the gradient animates, or set it to 0 for a static, freeze-frame look
    
5.  Optionally add Grain Mixer / Grain Overlay for extra texture
    

Shader powered by Paper Shaders.

**Refund Policy:**

Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: [hi@alicorak.com](mailto:hi@alicorak.com)

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

-   All · #6516

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-03
- **Updated**: 2026-08-16
- **Added**: 2026-07-03
- **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