Transitioning Between Background Colors

Question

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:

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?

Answer 1

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:

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):

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

http://dl.dropbox.com/u/12931900/example.psd

Answer 2

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
          1111111111111
EDGE      -------------
SHADOW    ^^^^^^^^^^^^^
          2222222222222
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:

body{
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.

Answer 3

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.