Cross-Browser CSS Gradients

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/

Ready to Start?

Let's Build Something Amazing Together

Ready to bring your vision to life? We specialize in creating stunning websites, mobile apps, and digital experiences that make an impact.

Accepting new clients
Free consultation
15+ years experience