Craft Gradients

Embed this gradient on your site

Embed the WebGL gradient on any page. Use one of the options below. Do not include both at the same time on a page, or you’ll create two canvases per placeholder.

1) Include the embedded script

2) Add a placeholder where you want the gradient

Option A: Auto-mount (recommended)

Add the data attribute and the script will automatically find and render the placeholder. If you need to prevent auto-mount, add data-craft-gradient-noauto on the placeholder and use Option B.

Live preview using the current s parameter (if present in URL):

Live preview using the current s parameter (if present in URL):

Option B: Manual mount (programmatic)

Disable auto-mount by adding data-craft-gradient-noauto and call the global API. Do not include Option A if you use this.