// generate smooth gradient palettes instantly
Free browser-based gradient palette generator. Create multi-stop gradients and extract evenly-spaced color swatches with HEX, RGB, and HSL values. No sign-up required.
Choose a gradient type, set the angle, and add color stops. Use a preset to start quickly, then customize.
Drag the slider to extract 2–24 evenly-spaced colors from across the gradient range.
Click any swatch to copy its value in HEX, RGB, or HSL. Export as CSS variables, a full gradient snippet, or JSON.
A free browser-based tool that lets you build CSS gradients with multiple color stops, then extracts a set of evenly-spaced discrete color swatches from across the gradient range. Get CSS code, copy individual colors, and export the palette — all 100% client-side.
A linear gradient transitions colors along a straight line at a set angle. A radial gradient radiates outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel, with the transition occurring around the circumference rather than along a radius.
The tool samples the gradient at evenly-spaced positions between 0% and 100% by interpolating between the color stops in the sRGB color space. If you request 8 swatches, they are placed at 0%, 14.3%, 28.6%, 42.9%, 57.1%, 71.4%, 85.7%, and 100% of the gradient range.
Yes — each color stop has a position slider (0–100%) that you can drag to move it anywhere along the gradient. The stops are automatically sorted by position in the CSS output. You can also remove any stop with the ✕ button, as long as at least two stops remain.
The CSS export gives you a complete, ready-to-paste snippet including both the gradient background property and a set of CSS custom properties for each extracted swatch color. You can paste this directly into your stylesheet and use both the gradient and the individual color tokens.
There is no hard cap — you can add as many color stops as you like. However, CSS gradients with many stops can become verbose. For most use cases, 2–6 stops produce smooth, professional-looking results. Beyond 8 stops, gradients can begin to look banded unless the colors are carefully chosen.
Yes — this is one of the primary use cases. Build a gradient from a light to dark version of a single hue (for sequential scales), or from one hue through neutral to another hue (for diverging scales). Then extract 5–11 swatches to get a ready-to-use color scale for charts and maps.
A gradient palette generator combines two concepts: a CSS gradient builder and a color palette extractor. You define a gradient using multiple color stops, then the tool samples that gradient at regular intervals to produce a set of discrete, usable color swatches. This bridges the gap between continuous color transitions and the discrete color tokens used in design systems and code.
This approach is particularly powerful because gradients inherently encode color relationships — the colors they contain are always harmonious with each other, since they exist on a single continuous path through color space.
CSS supports three gradient types, each with distinct characteristics. Linear gradients are the most common, transitioning along a straight line at a configurable angle. They are ideal for subtle background washes, button fills, and directional color transitions. Radial gradients emanate from a center point and work well for spotlight effects, glows, and circular UI elements. Conic gradients sweep around a center point — they are less common in UI design but excellent for pie charts, color wheel illustrations, and angular decorative elements.
In data visualization, color scales must represent quantitative values in an intuitive, perceptually uniform way. Sequential scales go from light to dark (or low to high saturation) within a single hue family — use this when data has a natural ordering from low to high. Diverging scales go from one hue through a neutral midpoint to another hue — use this when data has a meaningful midpoint (like zero, average, or a threshold) with deviations in both directions.
To build a sequential scale: set stop 1 to a light tint of your chosen hue, stop 2 to the full saturated color. Extract 5–9 swatches. To build a diverging scale: set stop 1 to your low-value hue, stop 2 to a neutral grey or white at 50%, stop 3 to your high-value hue. Extract an odd number of swatches (5, 7, or 9) so the midpoint lands on a discrete step.
Modern design systems define color as a set of named tokens — variables that can be applied consistently across all components. Gradient-derived palettes are a clean way to generate these tokens because they guarantee visual cohesion: every swatch came from the same continuous color path. The CSS variables export from this tool gives you a ready-to-use :root block that you can paste directly into your design system stylesheet.