5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T5c8,

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)

5a:[["$","$L5d",null,{"post":{"id":"01936304-646b-7d22-90db-7c60a5cfcfb5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"61a67d0e-ba1a-4816-8de6-1b448ceff352","name":"Shader Gradient","slug":"shadergradient","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/292834/IO8A-Rwme-DWdqlP0lGVexRel3qdAfzGZEVTTOU0","followed":false,"followsYou":false},"media":[],"resources":[{"id":"153","resolved":true,"title":"ShaderGradient","body":"$5e","bodyJson":null,"introduction":"Animated gradients","slug":"shadergradient","author":{"framerUserId":"61a67d0e-ba1a-4816-8de6-1b448ceff352","name":"Shader Gradient","slug":"shadergradient","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/292834/IO8A-Rwme-DWdqlP0lGVexRel3qdAfzGZEVTTOU0","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/153-pwUcprK2zHA769EWGMP3xPZBvPD39T","metadata":{"tint":{"h":0,"s":94,"l":25},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/153-nKHV4uBQVNmJICpx7NJAofzoC4mZXK","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/153-jllfRzSz5Gne2CZ6h9i5dJYSoRXsah","metadata":{"tint":{"h":0,"s":94,"l":25},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/153-pbxE2Rf2NYzhKpsaDtBlKxyvin5Hyh","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2024-11-24T11:52:12.127Z","updatedAt":"2024-11-24T11:53:20.279Z","publishedAt":"2024-11-25T11:10:52.523Z","featuredAt":"2026-07-13T18:49:30.928Z","approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"etnr5sluqpri7ic50jpoh4ihx","paid":false,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":211,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2024-11-25T11:10:52.523Z","updatedAt":"2024-11-25T11:10:52.523Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"01936304-646b-7d22-90db-7c60a5cfcfb5"},"postId":"01936304-646b-7d22-90db-7c60a5cfcfb5","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you