Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Are you asking for in photoshop or for your website? – Ryan Jun 13 '13 at 10:32
I use photoshop for my website. So in photoshop for the website. – Daniel Hernandez Jun 13 '13 at 10:37
up vote 2 down vote accepted

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('') 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%;}
share|improve this answer

You should create it using css.

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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