Gradient Generator
Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens
1 credit
Type
Angle (90°)
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#6366f1"/><stop offset="100%" stop-color="#ec4899"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>
Figma tokens
{
"type": "GRADIENT_LINEAR",
"stops": [
{
"position": 0,
"color": "#6366f1"
},
{
"position": 1,
"color": "#ec4899"
}
]
}