Community Central

User blog:Iopl3887/Simple CSS Gradients


Simple CSS Gradients

Iopl3887 October 7, 2013 User blog:Iopl3887

There are 6 browsers that can run with this CSS code. The browsers are; IE10 Consumer Preview, Firefox, Opera, Webkit (Safari/Chrome 10), Webkit (Chrome 11+), and W3C Markup, IE10 Release Preview.


IE10 Consumer Preview

background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #FFFFFF 100%);


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


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%);

Getting Started


To add your own colors, replace the hex code (#FFFFFF) with your hex code.

How to Add Multiple Browsers

To add multiple codes for different browsers, space each code using the ";" symbol.

background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);

What to Add it to

This code can be used for templates and infoboxes. It does not work with text.


Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.