Creating Graduated Backgrounds using CSS

Specifying a top to bottom gradient using CSS, in this case grey to white

/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #CCCCCC 0%, #FFFFFF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #CCCCCC 0%, #FFFFFF 100%);

/* Opera */
background-image: -o-linear-gradient(top, #CCCCCC 0%, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCCCCC), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #CCCCCC 0%, #FFFFFF 100%);

Share this page:-
    This entry was posted in CSS, Wordpress. Bookmark the permalink. Both comments and trackbacks are currently closed.