Gradient Colours

Features

• 180 gradients, each with a live preview and a one-line CSS snippet
• Search by name, case-insensitively, including fragments
• Search by colour: paste a value and see which gradients use it
• Browse by hue family: reds, oranges and browns, yellows, greens, blues and teals, purples, neutral
• Every gradient lists its angle and all its colour stops, each with a swatch
• Lift a single colour out: each stop is its own row, so you can copy just one end
• Angles are normalised to 0–360 degrees, so the CSS copies out valid
• All 180 sit in a searchable dropdown, with angle and stop count in the hint
• Empty input lists the whole set, grouped by hue
• Paste tolerance: quotation marks and full-width characters do not break the lookup
• CSS and colour values copy row by row, straight into a stylesheet

How to use

1. Enter a gradient name, such as Night Fade, for its preview, CSS and stops
2. Or paste a colour such as #ff9a9e to see which gradients use it
3. To browse by colour family, enter a family name
4. Leave the box empty to list all 180, grouped by hue

FAQ

Can I use these in a project?

Yes, but adapt them to your context. The data comes from an MIT-licensed open-source collection, so the values themselves are unrestricted. Two suggestions. First, check accessibility yourself: white text on a gradient fails contrast on some of these, particularly the mid-tone warm ones — verify against the colour values shown rather than trusting the preview to look fine. Second, performance: a `linear-gradient` is cheap by itself, but large gradient areas combined with animation or filters use noticeably more GPU, so measure that full-screen background with a scrolling animation before shipping it.

Why do a few gradients have the same colour twice?

Those 5 entries are genuinely flat in the original data (same colour at both ends) — they are part of the collection rather than a data error, one of them being effectively a light grey. We kept them, and kept the two-stop form, because that way it remains a valid `linear-gradient` that renders as a solid colour, which is what it actually is. Collapsing it to one stop would make it stop looking like a gradient in the CSS.

Why do some gradients not end at 100%?

That is a hard stop: the last stop sits at, say, 42% and everything after it is filled with that colour — an intentional effect, not missing data. There are 7 like this, and one whose first stop is at 59%. The only tidying we did was two things that do not change the result (collapsing redundant same-colour stops, normalising `1%`/`99%` leftovers to `0%`/`100%`). We deliberately did not pull the endpoints to the ends, because that would turn a solid region into a gradient and change how it looks.

How do I take just one colour out of a gradient?

Each stop is its own row, with its own swatch, so you can copy that single value. This is what people most often want: using a whole gradient is the minority case, and more often one end caught your eye and you want it as a base colour. Take the value and carry it into the colour schemes tool to generate a full set around it.

How do the angles relate to the keyword directions?

In CSS, `0deg` points from bottom to top, and the angle increases clockwise: `90deg` is left to right, `180deg` top to bottom, `270deg` right to left. The keyword forms (`to right`, `to bottom right`) map to fixed angles too, but on an element with an unknown aspect ratio a keyword adjusts its angle so the gradient crosses the diagonal, whereas a fixed angle does not — which is why keywords are often the safer choice in responsive layouts, while fixed angles suit elements whose proportions you control.