---
title: "ShaderGradient — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Shader Gradient · Media · ranked #12 among Framer plugins. Create beautiful moving gradients with ShaderGradient for your website."
canonical: "https://framer.elliotli.dev/plugin/shadergradient"
---

[Home](/)/[Plugins](/plugins)/[Media](/plugins/category/media)/ShaderGradient

# ShaderGradient

Animated gradients

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

![ShaderGradient preview image 1](https://framer.elliotli.dev/og/plugin/shadergradient/9504cf3c23abf172/1600x1200.jpg)

## Summary

Create beautiful moving gradients with ShaderGradient for your website.

## Description

## Create beautiful moving gradients with ShaderGradient for your website.

🎨 **Full customizability** : Gradients are made with webGL shaders, giving you the full customizability from colors, shapes to advanced effects like grains and lightings.

📦 **Ready for production** : We made a huge improvement in performance and the size of the package.

🔥 **Create colorful interactions** : Using Framer’s smart component, you can make creative interactions with the gradient component. Check out some examples from our website and remix link!

## How to use

Use this plugin to add a gradient component from presets or with url from https://shadergradient.co/customize. You can customize properties like colors, shapes, effects from property controls.

## Future updates

This is the first version of our Framer plugin, and we’ll continue updating the plugin for

-   custom UI for property controls
    
-   new Shaders
    

## Links

For any inquiry or bug report, reach out to us via Twitter / Instagram (@shadergradient). Tag us if you create something cool!

If you’re interested in the original React package, visit our Github repository (https://github.com/ruucm/shadergradient)

If you want to extract gradients in files like GIF and video, check out our Figma plugin (https://www.figma.com/community/plugin/1203016883447870818)

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

-   All · #12

## Details

- **Author**: Shader Gradient
- **Published**: 2024-11-25
- **Updated**: 2024-11-24
- **Added**: 2024-11-24
- **Categories**: Media

## More like this

-   [Model Prep](/plugin/model-prep) — Litchi Solutions · Free — Compress 3D models, add finishes
-   [Animated Diagram Builder](/plugin/animated-diagram-builder) — Luke Sn · Free — Build animated workflows visually.
-   [Bandwidth Saver - Cloudflare R2](/plugin/bandwidth-saver-cloudflare-r2) — Luke Sn · Free — Host videos in your own Cloudflare
-   [SVG Flower Generator](/plugin/svg-flower-generator) — Eugenio Ciccale · Free — Geometric SVG Flower Generator