Design Tool

Gradients. Drawn. Not coded.

Create beautiful CSS gradients with an interactive visual editor. Linear or radial. Multiple colour stops. Adjust angle and position. Copy the CSS instantly.

Try it freeHow it works
Free. Unlimited. No signup.
Demo

Design a gradient. Copy the CSS.

Linear or radial. Multiple colour stops. All visual.

CSS



The process
Three steps. Zero server.
01
Choose type
Linear or radial gradient. Pick your starting angle or shape.
02
Pick colors
Add colour stops. Drag to adjust positions. See the preview live.
03
Copy CSS
Get the exact CSS gradient. Paste into your stylesheet.


Pricing
Pay for volume. Not commitment.
Start free. Upgrade when you need more. No credit card required.
Free
Starter
$0/month
For occasional use
  • Unlimited gradients
  • Linear + radial
  • Multiple colour stops
  • Copy CSS
Get started
Most popular
Pro
$5/month
For daily professional use
  • Multi-stop gradients
  • Gradient gallery
  • Tailwind export
  • API access
Upgrade to Pro