CSS3:Background Opacity

This is nothing new to all you CSS Ninjas. Here we will take a look at background opacity. I will show you how I achieved the look that you see if you click the demo link below.


For the opacity effect I used rgba. The a is for alpha.

191, 121, 0, 0.2 is the setting that you adjust for the amount of opacity you want to achieve.

background: rgba(191, 121, 0, 1.0);

background: rgba(191, 121, 0, 1.0); Opacity set to 1.0

background: rgba(191, 121, 0, 0.5); Opacity set to 0.5

background: rgba(191, 121, 0, 0.1); Opacity set to 0.1

The other way is using just rgb with a opacity: 0.5;. So the css would look like this.

background: rgb(191, 121, 0); opacity: 0.5;

To get the desired look just change the opacity:0.5; like we did above. Works the same way.

If you want to play around with some CSS3 check out this site! css3generator.com

2 Replies to “CSS3:Background Opacity”

  1. I’ve used that css3 generator before, it’s pretty cool. I wish IE would catch up, there’s alot of nice effects you can do with css3

Comments are closed.