a simple way for morphing two colors in css?!

[mtrn]

lets say i've two divs with two different colors and i want the colors to morph together like sort of a gradient. can it be done? will it make the webpage much longer to load up?
example
View image: Untitled 1
:-=

 

[wedge1001]

add another div-tag
use css like this:
Ultimate CSS Gradient Generator - ColorZilla.com

 

[mtrn]

ill check it out!

__________________
Added after 10 minutes:

i'm not sure what should i include in the new div:

that's the css:
http://pastebin.com/ME6zbcVf

that's the html:
http://pastebin.com/5pea98M7

 

[wedge1001]

my bad.
i have not thought it through.

you could try adding a colored border, but it doesn't look that nice :/

#page-wrap {
    background-color: #9ace7f;
    direction: rtl;
     margin: 30px auto;
    padding: 30px; 
    width: 90%;
    -moz-box-shadow:    inset 0 0 50px 10px #a1b9d2;
   -webkit-box-shadow: inset 0 0 50px 10px #a1b9d2;
   box-shadow:         inset 0 0 50px 10px #a1b9d2;
}

 

[mtrn]

hi
what if i want to do it like i asked?

thanks,