Salem: 503.364.3340
Portland: 503.274.2423

CSS Gradient Background Maker

Use this demo to create CSS background-image gradients. The CSS markup works in browsers (including Internet Explorer 10, Chrome, Firefox, Opera, Safari) that support CSS3 gradients in unprefixed form or with any of the following vendor prefixes: -ms-, -moz-, -o-, -webkit-.

Existing markup: Click to paste existing CSS background-image markup that follows the format that is consistent with this demo's CSS markup.
Gradient style:
Start End
Add Stop
to bottom right
to bottom
to bottom left
to right
to left
to top right
to top
to top left
Your browser may not be compatible with this demo.
This demo only supports CSS gradients unprefixed or with -ms-, -moz-, -o-, and -webkit- prefixes.
CSS markup:
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

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

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

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

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

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

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
This demo uses jscolor (a JavaScript color picker developed by Jan Odvarko).
Orignal web page at: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html