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"] 5e:T836,

Detailed Overview

WebGL Gradients is a premium animated gradient component for Framer, powered by real-time WebGL shaders. Create smooth, fluid gradient backgrounds with GPU-accelerated animation, rich color transitions, and subtle procedural grain.

It includes 10 WebGL gradient presets ranging from soft light gradients to bold dark gradients. Each gradient uses four color stops combined with sine and cosine shader waves to produce continuously moving, organic visuals.

With simple Framer controls, you can customize the gradient, animation speed, grain, wave scale, opacity, and optional interactive gradient picker. The WebGL animation also pauses outside the viewport for more efficient rendering.

Key Features

Real-time WebGL gradient rendering
GPU-accelerated WebGL shaders
10 animated gradient presets
Smooth fluid shader wave animation
Four-color gradient blending
Light and dark gradient styles
Adjustable animation speed
Adjustable shader wave scale
Procedural grain texture
Customizable opacity
Optional interactive gradient picker
Responsive WebGL canvas
Viewport-aware animation
Static gradient fallback

Best For

Framer websites and landing pages
Hero sections and animated hero backgrounds
Portfolio websites and creative sites
SaaS and product websites
WebGL shader backgrounds
Animated gradient backgrounds
Interactive and generative web experiences
Premium website backgrounds
Creative developer and designer portfolios
Websites needing fluid WebGL effects.

5a:[["$","$L5d",null,{"post":{"id":"01a08adb-d2c1-730e-8cd9-0abd4721ca70","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mMwFMoRpWInG7SLz8niM","resolved":true,"title":"Webgl Gradients","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Detailed Overview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"WebGL Gradients is a premium animated gradient component for Framer, powered by real-time WebGL shaders. Create smooth, fluid gradient backgrounds with GPU-accelerated animation, rich color transitions, and subtle procedural grain."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes 10 WebGL gradient presets ranging from soft light gradients to bold dark gradients. Each gradient uses four color stops combined with sine and cosine shader waves to produce continuously moving, organic visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"With simple Framer controls, you can customize the gradient, animation speed, grain, wave scale, opacity, and optional interactive gradient picker. The WebGL animation also pauses outside the viewport for more efficient rendering."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time "},{"type":"text","text":"WebGL gradient","marks":[{"type":"bold"}]},{"type":"text","text":" rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GPU-accelerated "},{"type":"text","text":"WebGL shaders","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 animated gradient presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth fluid shader wave animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four-color gradient blending"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Light and dark gradient styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable shader wave scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Procedural grain texture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional interactive gradient picker"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive WebGL canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Viewport-aware animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static gradient fallback"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Best For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer websites","marks":[{"type":"bold"}]},{"type":"text","text":" and landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections","marks":[{"type":"bold"}]},{"type":"text","text":" and animated hero backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites","marks":[{"type":"bold"}]},{"type":"text","text":" and creative sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS and product websites","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL shader backgrounds","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated gradient backgrounds","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive and generative web experiences","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium website backgrounds","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative developer and designer portfolios","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Websites needing fluid WebGL effects.","marks":[{"type":"bold"}]}]}]}]}]},"introduction":"Smooth animated WebGL gradients","slug":"webgl-gradients","author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0412f842-fca5-456f-b801-c84139673b67/01a08adb-add9-72e8-ad3a-a455a0caa4c1.png","metadata":{"tint":{"h":204,"s":51,"l":35},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-10T10:27:36.543Z","updatedAt":"2026-10-07T11:13:05.901Z","publishedAt":"2026-09-10T10:27:36.537Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://webglgradients.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_UjoyOAEEcc22G8vSPNd8SBLaU2BpsQarwmJTZ0FUksc","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"2DW76FAZvP8HSO92KK7p","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T10:27:37.281Z","updatedAt":"2026-09-10T10:27:37.281Z","reported":false}}],"$L5f"]

Suggested for you