Shader Gradients

1. 1

   Upload shader-gradients.min.js from the download to your site.

2. 2

   Add the script once, and a <pf-gradient> tag wherever you want a gradient.

3. 3

   Pick a preset, or set your own colors, speed, grain and more as attributes.

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

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

1. 1

   Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (or host the .js file and add its script tag there).

2. 2

   Add a Code Embed element with a <pf-gradient> tag where you want the gradient.

3. 3

   Give it a height, and publish. Custom code runs on the published site.

<pf-gradient preset="mesh" colors="#7c3aed, #06b6d4, #f43f5e" style="height: 600px"></pf-gradient>

Custom code needs a paid Webflow site plan.

1. 1

   Upload shader-gradients.min.js to your Media library or your theme, and copy its URL.

2. 2

   Add a Custom HTML block with the script tag and a <pf-gradient> tag.

<script src="https://your-site.com/wp-content/uploads/shader-gradients.min.js" defer></script>
<pf-gradient preset="ocean" style="height: 500px"></pf-gradient>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload shader-gradients.min.js.

2. 2

   In the theme editor, add a Custom Liquid section with the script and the tag.

<script src="{{ 'shader-gradients.min.js' | asset_url }}" defer></script>
<pf-gradient preset="holo" style="height: 600px"></pf-gradient>

1. 1

   Copy react/ShaderGradient.tsx into your project. It needs only React 18+.

2. 2

   Render it with a preset or your own props. Children sit on top of the gradient.

import ShaderGradient from "./ShaderGradient"

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

Next.js: the server renders a CSS gradient in the same colors, then the shader takes over.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it ShaderGradient.

2. 2

   Replace the file's contents with framer/ShaderGradient.tsx from the download, and save.

3. 3

   Drag ShaderGradient onto the canvas, pick a preset (or Custom for your own colors), and press Preview.

On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to see it move there.