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