Gradient Generator

Build linear, radial, conic — and repeating — CSS gradients from up to five colors, with readability analysis and ready-to-paste code for CSS, Tailwind, SVG, and Flutter.

Aa white Aa black

Text on this gradient White: 3.46:1 AA large Black: 4.33:1 AA large Worst case across all 2 stops — text must clear every stop it crosses.

Color stops

Type

Angle — °

In context

Button

Card header

Gradient as an accent band

Hero banner

Best text color, per the report above

Code

Export color codes

CSS

background: linear-gradient(90deg, #4169e1 0%, #d946ef 100%);

Tailwind

bg-[linear-gradient(90deg,_#4169e1_0%,_#d946ef_100%)]

SVG

<linearGradient id="gradient" x1="0" y1="0.5" x2="1" y2="0.5">
    <stop offset="0%" stop-color="#4169e1" />
    <stop offset="100%" stop-color="#d946ef" />
</linearGradient>

Flutter

LinearGradient(colors: [Color(0xFF4169E1), Color(0xFFD946EF)], stops: [0, 1])

SVG has no native conic gradient and Flutter has no repeating variants, so those rows only appear when the target actually supports the current type.

Preset gallery

Curated starting points — each opens in the generator with its own shareable URL, ready to tweak.

Sunset Linear Ocean Linear Aurora Linear Fire Linear Candy Linear Midnight Linear Forest Linear Peach Linear Neon Linear Dawn Linear Spotlight Radial Color wheel Conic

Choosing a gradient type

Linear sweeps color along one axis and is the workhorse — heroes, buttons, and accent bands. Radial blooms outward from a center point, which reads as light or focus (the Spotlight preset shows why). Conic rotates hue around a center — it's how the color-wheel effect and pie-style charts are drawn with pure CSS. The repeating variants tile a short stop-run (25% here, so it repeats four times) into stripes and rings; they only look different from the plain versions when the stops don't already span the full axis. All six are plain CSS with no images, and linear, radial, and conic are supported in every modern browser — conic was the last to arrive, reaching all major engines around 2020.

The most common quality complaint — visible banding — happens when a gradient spans a long distance between two similar dark colors, forcing the renderer to spread few distinguishable shades over many pixels. Fixes that actually work: shorten the gradient, widen the color difference, or add an in-between stop (the OKLab mixer computes perceptually clean midpoints for exactly this).

Frequently asked questions

Two is the sweet spot for backgrounds and buttons; three works when the middle color bridges the outer two naturally. Beyond that, gradients start reading as rainbows — which is a legitimate look, but a different one. This tool caps at five stops for that reason.

Banding appears when few distinguishable shades stretch across many pixels — typically two similar dark colors over a large area. Shorten the distance, increase the color difference, or add an intermediate stop. The OKLab color mixer generates perceptually smooth in-between values that make good extra stops.

Only if the text clears WCAG contrast against every stop it crosses — the readability report above this tool computes exactly that worst case for white and black text. If neither passes, add a solid overlay or scrim behind the text instead of hoping.

For anything a gradient function can express: yes — zero network requests, perfectly sharp at any resolution and zoom, trivially themeable, and animatable. Images only win for painterly, noisy, or multi-directional blends that gradient math can't describe.

The URL is the gradient: stops, type, and angle all live in the address, so copying the link reproduces this exact result for anyone. The presets below work the same way.

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Ready to find your perfect palette?

Start from any color and let real color theory do the rest — or warm up with today's puzzle.

Generate a palette → Play Color Match