Figma Gradients
Figma Gradients
Preview
Figma HSL Gradients Maker
Figma Gradients
The Gradients page showcases a comprehensive system of 432 smooth gradients based on the Hue color format. This versatile collection enables designers to craft custom gradients by fine-tuning hue, luminosity, and saturation.
The gradient palette includes a wide range of pre-designed gradient combinations. It allows for numerous color combinations and can serve as a perfect starting point for finding brand colors and smooth gradients.
The Gradients page is an HSL-based gradient maker — pre-built smooth two- and three-stop gradients arranged by hue, with luminosity and saturation variants, used as colour styles for backgrounds, hero art and brand exploration.
Gradients AI Prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build an HSL gradient system in Figma. Palette: twelve hue families spaced 30 degrees around the colour wheel, each with three gradient styles — a soft pair of two stops at the same hue differing in luminosity, a vivid pair with higher saturation, and a triad spanning the neighbouring hue — saved as Figma colour styles named Gradient/Hue/Variant. Maker: a controls frame showing the three HSL sliders for hue, saturation and luminosity with their current values, and a large live preview tile, so a designer sees how moving each slider shifts the gradient. Angles: a row of the same gradient at 0, 45, 90 and 135 degrees and a radial version. Specimens: a hero background, a button, a card border and a text fill each using a style from the palette, in light and dark layouts. Add a contrast check row placing white and black text over every gradient with the lower contrast ratio printed. Keep every swatch a style, not a raw fill, so edits propagate.
Figma HSL Gradients Maker
Gradients
gradients
ui colors
gradients styles
Styles
Premium Figma UI Kit & design resources
Explore high-quality Figma components, templates, and UI elements.
