Shern Shiou

and whatever in between
« Back to blog
May 16
Views

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
Mozilla and Webkit base:
background: rgba(0,0,0,0.3);

IE:

background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);

Gradient
Mozilla:
background: -moz-linear-gradient(rgba(255,131,126,1) 0%, (255,131,126,0) 95%;
Webkit:
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,131,126,1)),to(rgba(255,131,126,0)));
IE:
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF837E, endColorstr=#00FF837E);

 

References
  1. http://msdn.microsoft.com/en-us/library/ms532930(v=vs.85).aspx
  2. http://stackoverflow.com/questions/2293910/css3-transparency-gradient
  3. http://css-tricks.com/rgba-browser-support/