Gradient Examples & Inspirations
A few hero section ideas showing how to place content over the gradient. You can pass your own settings with ?s=... in the URL and all examples below will use it.
Gradient Inspiration
Craft Your Flow
Interactive WebGL Gradient Designer
Make it bold
A stylized, editorial look
New
Ship gradients your users will remember
GPU-accelerated backgrounds with clean, accessible overlays and zero layout shifts.
What you get
- Drop‑in embed via a single script tag.
- Shareable preset links for fast iteration.
- Lightweight runtime tuned for hero sections.
Lightweight
GPU‑Accelerated
Accessible
Updates
Get fresh styles and tips
Be first to receive new gradient presets, design notes, and embed snippets.
3 steps
Embed in minutes
Add the script, drop a container, and pass settings from the app. That’s it.
- Include:
<script src="/embedded.js" defer></script> - Place:
<div data-craft-gradient="..." style="width:100%;height:400px"></div> - Customize: use the app to generate
?s=presets.
<script src="/embedded.js" defer></script> <div data-craft-gradient="G4ZiA" style="width:100%;height:400px"></div>
Loved by creators
What people say
A
“A perfect drop‑in for motion backgrounds.”
Art Director
J
“Fast, crisp and accessible out of the box.”
Frontend Engineer
S
“The presets helped us ship in a day.”
Studio Founder