Gradient Generator

About Gradient Generator

Gradient Generator is a browser-based tool for creating CSS and SVG gradients. It supports linear, radial, and conic gradient types, and lets users interpolate colors across 8 different color spaces (LCH, OKLCH, HSB, OKHSV, HSL, OKHSL, LCHUV, and JCH) to avoid the gray "dead zone" and color banding that can occur with standard linear interpolation between hues.

Generated gradients can be copied as CSS or exported as SVG, including a one-click option for pasting directly into Figma. The tool also includes controls for interpolation direction (short or long way around the color wheel), angle, position, and easing.

It is aimed at UI and product designers who need multi-hue gradients for interfaces or design mockups, particularly those working in tools like Figma, Photoshop, Sketch, or Canva where manually created gradients can produce visible banding or dull transitions.

Key features

• Generates linear, radial, and conic CSS gradients
• Interpolates across 8 color spaces (LCH, OKLCH, HSB, HSL, OKHSV, OKHSL, LCHUV, JCH) to avoid gray dead zones and banding
• One-click copy of gradient CSS
• One-click SVG export, including a Figma-ready copy option
• Adjustable gradient angle, position, interpolation direction, and easing
• Gallery of pre-made gradients that can be edited or copied

Frequently asked questions