Posted on Sunday, January 09th (4853 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.