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

One problem that frequently stumps me while working on sites is how to transition between two differing background colors elegantly. For instance, the top portion of a site I'm working on has a gray background while the bottom portion has a bluish texture. This creates this: enter image description here

These two colors almost blend together and the boundary between them isn't very prevalent. Is there a way of using borders to ease this transition. Would making the gray darker/lighter help?

share|improve this question

migrated from May 2 '12 at 3:38

This question came from our site for pro webmasters.

You might get better responses at – joshuahedlund May 1 '12 at 19:05

I do think the first step is, as you say, making the gray darker or lighter (which ever you think looks the best). This will create more contrast between the two colours and will stop them from blending so much. An example of this is below, where I've darkened the grey to #333333:

darkened gray

I also recommend adding some highlight to sharpen the edge of the blue area further, which results in these (varying the y of the line of highlight):

highlighted edge

varied higlight

Here's the PSD too so you can experiment with the opacity values on the highlight and shade areas:

share|improve this answer

One technique that I've always found appealing is a true-defined edge. Use a neutral color (Grey works) to make a designed edge with a shadow beneath it. You can make the image from the top like so:

COLOR 1   1111111111111
EDGE      -------------
SHADOW    ^^^^^^^^^^^^^
COLOR 2   2222222222222

Making that 5-10 px wide and however tall you need. The bottom of your background image should fade into your color 2, then in your css:

background-image: url(...);
background-repeat: repeat-y;
background-color: color2;

That creates a tiling effect all the way across for wider resolutions creating a nice 3-D landscape. I've used this several times with extremely favorable results.

share|improve this answer

i would do one as the background color and the other as a repeating 1px wide image sliced off a color to transparent gradient. In this case probably I would use gray as the background color on the style sheet, then make a blue to trans linear gradient in Photoshop, copy select a 1px slice of it and set that to tile horizontally.

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.