Tools / Gradient Generator
Gradient Generator
Create atmospheric, fluid gradients. Export as CSS, Tailwind, or PNG wallpaper.
Click & drag the dots on the canvas to move orbs
Inspired by shadergradient.co and the Generative Gradient Figma plugin.
Presets
Format
Orb 1
Color
X Position
14%Y Position
38%Size
88Opacity
62%Orb 2
Color
X Position
30%Y Position
72%Size
65Opacity
52%Orb 3
Color
X Position
82%Y Position
28%Size
84Opacity
90%Orb 4
Color
X Position
74%Y Position
68%Size
68Opacity
68%Global
Background
#061525
Blur
28pxGrain / Noise
Blend Mode
Export
CSS gradient
Stacked radial-gradient() layers. Paste directly into any .css file on a background-image property.Tailwind inline style
A React style={{}} prop ready to drop on any JSX element. Works alongside Tailwind without extra classes.