CSS3 boxshadow with opacity snippet

November 10, 2010 CSS Snippet

Here's how to create a style with boxshadow for different browsers (-webkit = Safari, -moz = Firefox etc). It also shows how to use opacity using the rgba-constructor:
rgba(red, green, blue, opacity ranging from 0.0 to 1.0)

The boxshadow attributes are:
distance x, distance y, blur, shadow color

<style type="text/css">
.shadow {
  box-shadow:5px 5px 20px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow:5px 5px 20px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.75);
}
</style>

This is a sample of the shadow above

CSS3 boxshadow with opacity snippet

Related posts:

Comments