CSS Gradient Generator
Design linear, radial, conic and mesh gradients with multi-stop control. Copy CSS, SCSS or Tailwind — or export SVG and PNG.
Shortcuts: / search · R randomize · T theme
Frequently asked questions
What gradient types are supported?
Linear, radial, conic and layered mesh gradients, with up to 8 color stops each at custom positions.
How do I use the gradient in Tailwind CSS?
Click “Copy Tailwind” to get an arbitrary-value class like bg-[linear-gradient(...)] that you can paste straight into your markup.
Can I download the gradient as an image?
Yes — export as SVG (vector, infinitely scalable) or PNG (1200×630, ideal for social covers).
What is a mesh gradient?
A mesh gradient layers several radial gradients at different positions, creating the soft, blended, organic look popular in modern branding.