---
title: "Mesh Gradient — Free Framer component · Best of Framer"
description: "Free Framer component · by Lucas · Effects. Animated gradient with real grain"
canonical: "https://framer.elliotli.dev/component/mesh-gradient"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Mesh Gradient

# Mesh Gradient

Animated gradient with real grain

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

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

## Summary

Animated gradient with real grain

## Description

Most gradient components on this marketplace are static CSS. This one moves.

Two to eight colour fields drift over one another on paths that never repeat, so the eye never catches a loop. A film grain layer sits on top — generated in the browser, so it costs nothing to download and never tiles visibly. A vignette closes the corners.

Everything is adjustable from the property panel: colours, number of fields, spread, speed, blur, contrast, grain amount and size, vignette. The gradient canvas renders at low resolution behind the blur, which is why it stays smooth on a full-screen hero. Set the cursor reaction to zero and the background becomes fully autonomous.

Canvas 2D, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and freezes on a still frame inside the Framer canvas so your editor stays responsive.

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

-   All · #4199

## Details

- **Author**: Lucas
- **Published**: 2026-08-05
- **Updated**: 2026-08-05
- **Added**: 2026-08-05
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo