html - How can I use a CSS gradient on both top-left and top-right corners of my page? -


i'm trying figure out how can use this:
http://www.colorzilla.com/gradient-editor/

and use 1 in top-left corner of page, top-right.

any appreciated.

you can either like this (i stripped code out, best viewed in chrome), using 2 wrappers , applying gradient each (provided each ends transparent allow other show through).

the gradient code used generate is:

#wrapper {     width:100%;     height:500px;     background: -webkit-radial-gradient(top left, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,0) 50%);     border:solid 1px red; }  #inner {     width:100%;     height:500px;     background: -webkit-radial-gradient(top right, ellipse cover, rgba(0,0,255,1) 0%,rgba(0,0,255,0) 50%);     border:solid 1px blue; } 

here's demo result:

enter image description here

alternately, combine both gradients 1 using colorzilla editor, using multiple color stops.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -