Gera Tools

CSS Gradient Color Extractor

Extract all color stops from a CSS linear or radial gradient

Paste a CSS linear, radial, or conic gradient and instantly extract every color stop with its position. Strips out direction and angle keywords so you get a clean list of colors to reuse or copy. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated Source: Gera Tools

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.

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.

Worked example

Given this gradient string:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, rgba(254,180,123,0.4) 100%)

The tool identifies the type as linear-gradient, drops 135deg as a direction keyword, and reports three stops:

#ColorPosition
1#ff7e5f0%
2#feb47b50%
3rgba(254,180,123,0.4)100%

Clicking “Copy colors” gives you all three values on separate lines, ready to paste into a design tool or another color converter.

What you can do with the extracted colors

Rebuild as design tokens. If a designer gave you a gradient, the individual stops are the brand colors. Extract them here, then name each one and paste into a CSS custom properties block so you can reference them consistently.

Match gradient colors in a different format. If the gradient uses hsl() internally but your codebase expects hex, extract the stops and run them through a color converter.

Audit gradient consistency. If multiple gradients are supposed to share the same orange-to-coral transition, paste each and compare the extracted stops side by side to confirm they are actually the same color values.

Recreate a gradient with a modified stop. Extract the stops, adjust one color, and reconstruct the gradient syntax manually using the positions you extracted.

Notes and edge cases

  • repeating-linear-gradient and repeating-radial-gradient are parsed the same way — the repeating- prefix is noted in the type but does not change how stops are extracted.
  • Hint values (bare lengths between stops, like 10%, without a color) are included in the output and labelled as hints rather than colors.
  • If the input is not a valid gradient function, the tool reports that no gradient was detected rather than guessing, so you know the string needs fixing before processing.