I have this site Site Link where I use gradients on the background. When you for example switch between site "Leistungen" & "Referenzen" you will see that the background darkness from the gradients on the top is getting darker or brighter (when switching between the two pages) because of the different heights of the two pages. Now my question is how I can use such gradients in photoshop to have the same look on different heights because actually the gradient is stretching when having smaller or bigger heights?

  • Are you asking for in photoshop or for your website?
    – Ryan
    Jun 13, 2013 at 10:32
  • I use photoshop for my website. So in photoshop for the website. Jun 13, 2013 at 10:37

2 Answers 2


What you would normally do in web is use a 'partial' gradient with a fixed height, and then a background color taken from the last line of your gradient:

enter image description here

The HTML for it would be (as Joonas mentions in his comment) something like:

html {
background: #e1e1e1 url('https://i.stack.imgur.com/bzWkL.png') repeat-x;

If you have more than one gradient, you probably need more than one image. You can use the gradient in any direction, so as long as you position the gradients (using position absolute, probably) you can create more 'levels' inside the page:

enter image description here

body {background-color: #e6bfb6;}
.gradient1 {background-image: url(gradient1.jpg); height: 100px; position:absolute; top: 0px}
.gradient2 {background-image: url(gradient2.jpg); height: 100px; position:absolute; top: 40%;}
.gradient3 {background-image: url(gradient3.jpg); height: 100px; position:absolute; top: 90%;}

You should create it using css.

Then have a repeating background-image fallback with IE conditional comments.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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