RGBa and -webkit gradients: Yes.

When @malarkey asked if RGBa worked with -webkit gradients, my own curiosity couldn’t resist a quick and fugly test to see. Yes indeed, it works:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Gradient Test</title>
    <style type="text/css" media="screen">
      body {
        background-color: green;
      }
      div {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333));
        width:80%;
        height:5em;
        margin:0 auto;
        padding:1em;
        text-align:center;
        color:white;
      }
    </style>
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

Screen shot showing green bleed-through on a -webkit gradient div

Leave a Comment

* are Required fields