Parallel Studio
See Deltaproof
Back to blog
4 min readParallel Studio

Animated Shader Gradient Backgrounds in Framer or Webflow (No Plugin Lock-In)

framerwebflowshadergradientwebglbackgrounds

Animated mesh and shader gradients used to mean either a Framer Marketplace plugin or a custom Three.js build. Both work. Both also lock you into one editor or one dependency tree.

There is a third path: a drop-in script (and matching Framer code component) that draws GPU gradients in a custom element. You can use the same pack on Framer and Webflow, WordPress, Shopify, or plain HTML. This guide follows the install steps shipped with Shader Gradients.

What you get

  • A single file, shader-gradients.min.js (~10.4 KB gzipped), no Three.js, no React required for the script build.
  • A <pf-gradient> custom element for any page that can load a script.
  • A Framer code component with a properties panel (presets, colors, speed, grain).
  • Presets such as glass, mesh, ocean, and holo — or your own 2–5 colors in any CSS format.

The gradient is decorative (hidden from screen readers). Put real headlines and CTAs as children or overlays so SEO and accessibility stay intact.

Framer: code component (not marketplace-only)

1. New code file

In your Framer project: Assets → Code → + → New component file. Name it ShaderGradient.

2. Paste the component

Replace the file contents with framer/ShaderGradient.tsx from the Shader Gradients download. Save.

3. Place and configure

Drag ShaderGradient onto the canvas. In the properties panel, pick a preset (or Custom for your own colors). Press Preview to see motion.

On the canvas you normally see a still frame so the editor stays fast. Set On Canvas → Live if you want it to animate in the editor itself.

Children of the component sit on top of the gradient — headlines, buttons, forms — without a separate stacking hack.

This is a code component you own in the project. It is not limited to a Marketplace listing's update cycle, and the same download also includes the script-tag and React builds for sites outside Framer.

Webflow: Footer code + Code Embed

Webflow cannot host raw .js files the way Shopify Assets can. You have two options from the download:

Path 1 — ready-made Footer snippet

  1. Open script/webflow/footer-code.html from the download.
  2. Paste it into Site settings → Custom code → Footer code.
  3. On the page, add a Code Embed with a <pf-gradient> tag and an explicit height.
  4. Publish (custom code runs on the published site).

Path 2 — host the file yourself

  1. Upload shader-gradients.min.js to any static host.
  2. Add in Footer code:
<script src="https://YOUR-HOST/shader-gradients.min.js" defer></script>
  1. Code Embed:
<pf-gradient
  preset="mesh"
  colors="#f97316, #06b6d4, #f43f5e"
  style="height: 600px"
></pf-gradient>

Note: Custom code needs a paid Webflow site plan.

Plain HTML (same script everywhere)

<script src="/shader-gradients.min.js" defer></script>

<pf-gradient preset="glass" style="height: 600px">
  <h1>Your headline</h1>
</pf-gradient>

Upload the script once, drop the tag wherever you want a background. Presets or attributes cover colors, speed, grain, and more.

React / Next.js

Copy react/ShaderGradient.tsx into the project (React 18+). Children sit on top of the gradient. On Next.js, the server can render a CSS gradient in the same colors first; the shader takes over in the browser.

import ShaderGradient from "./ShaderGradient"

<ShaderGradient preset="glass" style={{ height: 600 }}>
  <h1>Your headline</h1>
</ShaderGradient>

Performance habits that matter

  • Renders one shader at 1× on the GPU; steps down resolution on slow devices.
  • Pauses when offscreen and in background tabs.
  • Reduce Motion: visitors with the preference on see a still frame (you can also force a static frame for everyone).
  • WebGL 1 on current phone browsers; falls back to a Canvas 2D gradient where WebGL is off.

Why not "just use a CSS gradient"?

CSS gradients are great for static or lightly animated backgrounds. Shader gradients earn their keep when you want fluted glass, caustics, chrome-like sheen, or multi-stop motion that still looks sharp on a retina hero. If a flat CSS gradient is enough, use CSS. If the hero needs to feel like light moving through material, a small WebGL pack is the right tool — without dragging in a full 3D engine.

Shader Gradients is one entry in the Parallel Studio /effects catalog (particles, kinetic type, liquid metal buttons, particle globe, fluid cursor, text spinners, and more). Each product is a one-time purchase for a single project; the All-Access Pass is $49 if you want the full set.

Pricing

  • Shader Gradients: $12 one-time.
  • Works with Framer, Webflow, WordPress, Shopify, plain HTML, and React — same download.

Install on a staging page first, confirm height and overlay text, then publish. That is the whole workflow: no marketplace lock-in, and no custom Three.js repo to maintain.