Build a gradient — button, hero, or full backdrop — tune where each color takes over, give it motion or keep it still, then copy the CSS, a share link, or a ready-to-paste AI prompt that recreates the look anywhere.
Build
Design the look
Every change repaints the three previews on the right instantly. Start from a preset or from scratch.
Presets
Type
Direction
Center
Colors & where they hand off
Position is where that color sits at full strength — drag two positions closer for a hard hand-off, apart for a slow melt.
Base + blobs
#0b1026canvas behind the blobs
Motion
Motion respects the visitor's reduced-motion setting — the exported CSS only animates when the OS allows it.
Glass card
The white card floating on the background preview — slide down to let more gradient bleed through.
Buttons
Hero / card
Second Horizon
A headline sitting on your gradient.
Full background
Your app, on this backdrop
Cards float over the gradient like this — check the text still reads.
Button behavior
Button states
The second half of a good button: what hover does, and how it nags you when content changed and Save needs pressing. Type in the field to dirty the form, then hit Save and watch it settle.
Corners — every button, everywhere
On hover
Unsaved changes
Animated effects ride the same speed dial as motion, and fall back to the steady ring under reduced motion — the nag never disappears, it just stops moving.
Playground
All changes saved
The whole family goes dirty together — type above to see the nag on every style at once.
Take it with you
Export
Copy the CSS to paste straight into a stylesheet, a share link that reopens this exact look, or an AI prompt — plain-English spec plus the CSS — to hand any model and say “make it look like this.”
Yours
Saved gradients
Keep the keepers. Saved in this browser — nothing leaves your machine.