- Published on
Cross-Browser CSS Gradients
- Authors
- Name
- Steve McNiven
- @stevemcniven
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/