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.

Gradient Generator | DevTools Surf

DevTools Surf

Example: Gradient Generator

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

linear 90 #6366f1 0 #ec4899 100

Output

background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #110000 100%);
background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #110000 100%);
background: radial-gradient(circle, #6366f1 0%, #ec4899 50%, #110000 100%);

Stops: #6366f1 -> #ec4899 -> #110000

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.

Related Color Tools

Color Converter Color Palette Generator Contrast Checker Color Contrast Matrix Hex → Tailwind Gradient → Code Color Name Finder Color Scheme Generator