Which gradient types are supported?

Linear, radial, and conic gradients are all parsed, including their repeating- variants. The tool detects the gradient function name and reads the comma-separated arguments inside it.

How are direction and angle keywords handled?

Tokens such as 135deg, to right, circle, or at center are recognized as non-color arguments and excluded from the results, so you only see actual color stops.

Does it keep the position of each stop?

Yes. If a stop includes a length or percentage like 50% or 20px, that value is shown next to the color. Stops without an explicit position are listed with a dash.

Will rgba() and hsl() colors break the parser?

No. The parser splits arguments only at top-level commas, so commas inside rgba(), hsl(), or hsla() functions are preserved and the full color value is captured intact.

What if my string is not a gradient?

If no linear, radial, or conic gradient function is found, the tool reports that no gradient was detected rather than guessing, so you know the input needs fixing.

CSS Gradient Color Extractor

Pull every color out of a CSS gradient

Gradients pack several colors into a single CSS value, which makes them awkward to reuse. This extractor parses a gradient string and hands back a clean list of just the color stops — with their positions — so you can rebuild a palette, generate design tokens, or feed the colors into another tool.

How it works

A CSS gradient looks like linear-gradient(<direction>, <stop>, <stop>, ...). The first step is to identify the gradient function (linear, radial, or conic, optionally prefixed with repeating-) and grab everything inside the outer parentheses. Those contents are then split at top-level commas only: a small parenthesis-depth counter ensures that commas inside rgba(254, 180, 123, 0.4) are not mistaken for argument separators.

Each resulting argument is classified. Arguments that match a direction or shape pattern — to right, 135deg, 0.5turn, circle, at center, and similar — are dropped because they carry no color. The remaining arguments are color stops. Within a stop, any trailing length or percentage (such as 0%, 50%, or 20px) is separated out and reported as the stop’s position, leaving the bare color value behind.

Notes and example

Given linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, rgba(254,180,123,0.4) 100%), the tool reports the type as linear-gradient and lists three stops: #ff7e5f @ 0%, #feb47b @ 50%, and rgba(254,180,123,0.4) @ 100%. The 135deg direction is filtered out automatically.

This is useful when a designer hands you a gradient and you need the individual swatches, or when you want to convert a gradient palette into a different format with one of the sibling color tools.