---
title: "Aurora Gradient — Free Framer component · Best of Framer"
description: "Free Framer component · by Aza Ali · Backgrounds. Animated mesh gradient on canvas"
canonical: "https://framer.elliotli.dev/component/aurora-gradient"
---

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

# Aurora Gradient

Animated mesh gradient on canvas

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

![Aurora Gradient preview image 1](https://framer.elliotli.dev/og/component/aurora-gradient/933e8a9ce23d81e9/1600x800.jpg)

## Summary

Animated mesh gradient on canvas

## Description

An animated mesh gradient that renders on a canvas, so it moves instead of sitting there as a flat image.

Three coloured light sources drift and blend in real time. Everything is adjustable from the properties panel: the three colours, drift speed, blur, film grain and corner radius.

Drop it behind a hero, a pricing table or a whole page. It fills whatever frame you put it in and cleans up its animation frame when unmounted.

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

-   All · #1554

## Details

- **Author**: Aza Ali
- **Published**: 2026-08-16
- **Updated**: 2026-08-16
- **Added**: 2026-08-16
- **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