Horizontal gradient

Hi guys,

I’m trying to create a background gradient using repeat-y and having great difficulty. Basically the problem is this:

I have created an image manager and the user may add as many photos as he wants.

The image manager must have a gradient background for effect.

This means that I cannot use repeat-x because the number of pix will often exceed the size of the gradient and it is just impossible to guess how many there could be. As I’m sure you know, when a gradient image repeats back to the beginning it looks terrible graphically.

Anyway, I have been trying to get a good effect with horizontal gradients and I just can’t seem to get it right.

I don’t want to use a plain background color, can anyone suggest any tutorials, tips for getting this effect to look good?


use a CSS gradient, it will stretch and always look good.

read the spec: (if someone has a better link plz post it)
CSS Image Values and Replaced Content Module Level 3

a generator that makes an image too for older browsers
CSS3 Gradient Generator


It’s a bit hard to visualise what you want but usually with vertical gradients the gradient would eventually fade into a solid background colour and then the background colour of the element carries over.

If on the other hand you want a continuous gradient you could flip the gradient in your paint package and attach it to the end of the existing gradient and then it will repeat continuously but with the fade going up and down (like the background in this ancient example).

Or you could use CSS 3 gradients for modern browsers.


Same link as already posted by Gar onn above

HI thanks for that,

That’s def an option yes, having a gradient that repeats in this manner is much better than one that goes from dark to light and then instantly dark again. Good thinking :wink: