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:
alternately, combine both gradients 1 using colorzilla editor, using multiple color stops.
Comments
Post a Comment