November 3rd 2014

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



You can subscribe to new posts via email or RSS.