About Gradient Generator

Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Design hero section backgrounds for landing pages
• Generate gradient tokens for design system libraries
• Create branded gradient overlays for image components
• Export gradient CSS for email template backgrounds

Tips

• Add multiple color stops to create complex gradient effects
• Export your gradient as CSS, SVG, or Figma design tokens
• Adjust the gradient angle or switch between linear and radial

Fun Facts

• CSS gradients were first implemented by WebKit in 2008 using a proprietary syntax; the standard linear-gradient() syntax was finalized in CSS3 in 2012.
• Instagram's iconic gradient logo, designed by Ian Spalter in 2016, uses a radial gradient blending purple, magenta, orange, and yellow.
• SVG gradients support spreadMethod attributes (pad, reflect, repeat) that CSS gradients do not, offering more tiling flexibility.

FAQ

Linear, radial, or conic?

All three. Linear for backgrounds, radial for lights/shadows, conic for ring loaders and pie charts.

Can I export multiple formats?

CSS (linear-gradient, etc.), SVG (linearGradient/radialGradient), and Figma tokens. Pick the format your target supports.

What about color stops?

Drag to add, click to remove. Hint positions (percent or length) let you bias the gradient — a 90% stop concentrates most of the gradient in the last 10%.

Does it handle modern CSS color spaces?

Yes — toggle `in oklch` or `in lab` for gradients that interpolate in perceptually-uniform space. Eliminates the classic 'dull gray middle' of naive RGB gradients.