Question

I have the below css code for a web gradient on my page, I would like to make a background image that is exact to this gradient using the Gimp. Anyone have expertise doing this that might be able to lend some advice? Thanks

background-image:-webkit-linear-gradient(90deg, rgba(51, 51, 51, 1.00) 0.0% , rgba(26, 26, 26, 1.00) 50.5% , rgba(51, 51, 51, 1.00) 50.7% , rgba(77, 77, 77, 1.00) 100.0% );

Answer 1

GIMP can’t parse that directly, althoug GIMP 2.8 ships with a Python script that can output gradients in this CSS syntax

You could make a python-script to parse CSS gradient syntax into GIMP Gradients,
and them use this gradient on an image.

Of course it is overkill if you are needing that just once –
I’d recommend creating a new gradient in GIMP, and manually edit the recorded file
(in ~/.gimp-2.8/gradients folder if you are on *nix, else check for the user gradients folder in the preferences).

GIMP’s gradient file is straightforward – a text only file that goes like:

GIMP Gradient
Name: Untitled
2
0.000000 0.243464 0.486928 0.000000 0.000000 0.000000 1.000000 0.000000 1.000000 0.000000 1.000000 0 0 0 0
0.486928 0.743464 1.000000 0.000000 0.000000 1.000000 1.000000 1.000000 1.000000 1.000000 1.000000 0 0 0 0

So this is a single gradient, with two segments – each line has the start-point, endpoint of each segment, the starting ARGB color, ending ARGB color, and ,…don’t care, just keep the four zeros at the end: most likely they are used to describe the type of color in each endpoint, and we want 0.