pngbackground-imagegimpgradient

The Gimp - Creating background gradient


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% );

Solution

  • 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.