CSS3 Gradient and Transparency

Due to inconsistency of CSS3 implementation across different web browser, I wish to leave some note on Gradient and Transparency. Transparency background: rgba(0,0,0,0.3); background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); Gradient background: -moz-linear-gradient(rgba(255,131,126,1) 0%, (255,131,126,0) 95%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,131,126,1)),to(rgba(255,131,126,0))); background:transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF837E, endColorstr=#00FF837E); References: MSDN http://msdn.microsoft.com/en-us/library/ms532930.aspx Stackoverflow http://stackoverflow.com/questions/2293910/css3-transparency-gradient CSS Tricks http://css-tricks.com/rgba-browser-support/

May 16, 2011 · 1 min · Shern Shiou Tan