Cross Browser Linear Gradients with CSS
Posted on Sunday, January 09th (3150 days ago)
Here’s a code snippet for your basic linear gradient using CSS3. It includes a fallback color for browsers that won’t understand the code and a filter for IE.
background: #cccccc; /* older browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999)); /* webkit */ background: -moz-linear-gradient(top, #ccc, #999); /* firefox 3.6+ */
The line for IE is optional. It’ll eat up a lot of memory to use it sparingly.
I also suggest that you test in older browsers and set up border styles and appropriate colors so those browsers offer suitable visual replacements. (think button styles) I’ll usually use a combination of border colors to make up for the lack of box-shadow etc…
About Joseph R. B. Taylor
Joseph R. B. Taylor is a humble designer/developer who makes stuff for screens of all shapes and sizes. He is currently the lead UI/UX Architect at MScience, LLC, where he works to create simple experiences on top of large rich datasets for their customers and clients.