Transitioning Between Background Colors

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?


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:

Source : Link , Question Author : Vecta , Answer Author : Community

Leave a Comment