I'd like to make my CSS3 background gradient fixed. Any suggestions?

  • 1
    What do you mean by "fixed"? – BenV Oct 27 '10 at 15:12

A way I have done it in the past was, within your css file set your background color to a solid color (example, #FFF). Create an gradient image that fades from red (top) to white (bottom), with a width of 8px and a height of 800px. Go back to your css file and add a background image attribute and point it to the gradient image you just created and set it to repeat horizontally.

Now if someone has a screen resolution greater than 800 it will not matter because the white bottom of the image will fade in perfectly with the white background color you set.

  • After reading everyone's suggestions it seems like no one understands what "fixed" means. I suppose there is no way to do it via CSS3 alone. Your trick is the next best thing though. – corysimmons Nov 2 '10 at 14:02

An alternative that does not require image files is to use a div layer to hold the gradient you want. Make the div flood the screen by setting width and height to 100%, and fix it by using position: fixed. Important: put this div before all of your content (like right after <body>) or alternatively use z-index to make sure the div doesn't obscure your content.

  height: 100%; width: 100%;  
  position: fixed; top: 0px; left: 0px;  

Hope this works.


Well, using CSS3 gradients you know that it will not work on IE at all. For IE you can use proprietary filters. But I'm supposing you are over this technical limitation, and really want to learn about truly CSS3 gradients.

And by fixed I understand you want it to be the same gradient, independent of screen width and/or height. Let's say, it starts at 10px, and go to 500px.

To achieve this effect, you should use the color-stops on the gradients.



Have fun.


I think you should just google for "CSS gradients". There are a lot of examples. Here I found a site, which explains well, how to use it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.