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:
After:
