ShaderGradient
Create beautiful moving gradients with ShaderGradient for your website. You can customize all the properties from colors, shapes to advanced effects like grains and lightings to make your own gradient.
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)
