Fandom

Community Central

Comments0

Simple CSS Gradients

Iopl3887 October 7, 2013 User blog:Iopl3887

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.

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.


Browsers

IE10 Consumer Preview

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


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



Getting Started

Colors

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.


Example:
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.


Example

Also on Fandom

Random Wiki