Published on

Cross-Browser CSS Gradients

Authors

Edit: Content Update

Since I posted this there’s lots of great tools you can use to visualize your gradients, and nowdays it’s just supported in all major browsers prefix free.

Here’s a cool gradient generator to try.


Heres a quick snippit to allow you to show CSS Gradients in all 3 major browsers

Just re-load this in IE, Firefox, Safari, or Chrome…should look similar on all 3 without any CSS Background Sprites!

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C1D11C), to(#FFFFFF)) rgb(246, 246, 246);
background:-moz-linear-gradient(center top , #C1D11C, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#C1D11C, endColorStr=#FFFFFF);

This is a super useful URL to visualize and generate the gradients too
https://css3please.com/