Question

Is it possible to get a correct split of a background-image linear gradient definition with a unique regex, ie :

linear-gradient(hsl(200, 83%, 64%), hsl(200, 81%, 59%) 32%, rgb(22, 22, 22) 81%, red)

What I’m looking for is to get multiple matches like this (in that case 4 matches):

$1:hsl(200, 83%, 64%)
$2:
$1:hsl(200, 81%, 59%)
$2:32%
$1:rgb(22, 22, 22)
$2:81%
$1:red
$2:

I’m currently trying something like :

(hsl\([^\)]*\))\s*(\d+%)?

But that only works for hsl, there must be some clever way to be less specific

Answer 1

There are quote a number of formats for colour in CSS. Including

• ‹Name› (eg. “red”)
• #rgb
• #rrggbb
• rgb(r, g, b) (each number 0–255)
• rgb(r%, g%, b%)
• hsl(...) (as in the Q)

and then hsla and rgba which add an alpha channel. And finally the currentColor keyword.

Simplest approach would be to build a regex for each that you want to support, and then separate with alternation (|). To start with:

#[0-9a-fA-F]{3,6}|rgb ?\([ 0-9.%,]+?\)

which should cover the hex and (both) rgb forms. But it will also match invalid expressions (valid only will be more complex).

Finally, don’t forget that linear-gradient:

• can start with a direction (eg. “to bottom”) or angle
• each colour can include a stop (if you don’t want the colours spread out evenly): either percent or distance
• there is also repeating-linear-gradient.