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.
You can subscribe to new posts via email or RSS.