Chris Lamb

Generating gradiented fade images using ImageMagick

Whilst gradienting images is certainly possible with CSS, current browser support means that it can still make sense to do it yourself, especially if front-end performance is a concern.

However, to avoid manual work in Gimp or Photoshop, you can use ImageMagick to generate them for you:

$ wget --quiet -Obackground.jpg http://i.imgur.com/WCjlJ.jpg
$ convert background.jpg \
      -alpha set -channel A \
      -sparse-color Barycentric '%w,%[fx:h-300] opaque %w,%h transparent' \
      -background '#ffcc32' -flatten \
      background-gradiented.jpg

300 here refers to the height or "speed" of the gradient and the target colour is specified by with -background.

Before:

https://chris-lamb.co.uk/wp-content/2014/gradient_before.png

After:

https://chris-lamb.co.uk/wp-content/2014/gradient_after.png

Chris Lamb is a freelance software developer and the current Debian Project Leader. You can read other posts by me, see software I have written or read more about me. You can also follow me @lolamby.


Tags: Hacks

Planets: ALUG UWCS WUGLUG Debian

Monday 3rd November 2014