Generating gradiented fade images using ImageMagick

  • 3 November, 2014

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
$ convert background.jpg \
      -alpha set -channel A \
      -sparse-color Barycentric '%w,%[fx:h-300] opaque %w,%h transparent' \
      -background '#ffcc32' -flatten \

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