---
title: "Gradient Motion — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Edi Priatama · Backgrounds. animated background"
canonical: "https://framer.elliotli.dev/component/gradient-motion"
---

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

# Gradient Motion

Gradient Background Effect

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

![Gradient Motion preview image 1](https://framer.elliotli.dev/og/component/gradient-motion/9d070231ff8748ee/1600x1200.jpg)

## Summary

animated background

## Description

**Dynamic • Customizable • Responsive**

Bring your projects to life with a smooth animated gradient background. Perfect for landing pages, hero sections, and interactive designs.

**Customizable Options**

1.  **Theme Control**
    
    -   Choose from predefined palettes: Aurora, Sunset, Ocean, Forest, Monochrome.
        
    -   Switch between Light or Dark modes.
        
    -   Or disable theme mode and use your own custom colors.
        
2.  **Colors** (when custom mode is enabled)
    
3.  **Gradient Style**
    
    -   Switch between Radial, Conic, Mesh, Linear, Diamond gradient types.
        
    -   Each type has its own unique movement and blending style.
        
4.  **Animation**
    
    -   **Animation Speed** → Control how fast the gradient transitions.
        
    -   **Respect Motion Preference** → Automatically respects users who prefer reduced motion (for accessibility).
        
5.  **Visual Effects**
    
    -   **Blur Amount** → Add soft, dreamy effects or keep it sharp.
        
    -   **Opacity** → Control transparency from subtle background to bold focus.
        
    -   **Gradient Size** → Adjust the scale and coverage of the gradient.
        

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

-   All · #4358

## Details

- **Author**: Edi Priatama
- **Price**: $7.00
- **Published**: 2025-10-09
- **Updated**: 2026-10-02
- **Added**: 2025-10-04
- **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