Easy CSS Opacity

Written on January 2nd, 2014
Written within: Coding, CSS

I used to have a lot of issues creating backgrounds with a lower opacity than the text. I recently, over the last few months, realized a quick way to accomplish it without much of a headache. Lets begin.

You might think just to add opacity to your stylesheet for the div you want to change, and that is something I used to do for awhile. However, the following CSS code will make your life so much easier.

.box {
     background: rgba(255, 255, 255, 0.65);
}

It really is that simple. Let’s break down this snippet. First off, RGBA stands for red green blue alpha. You can change this to any color you want that is in the color wheel as long as you know the formula. The numbers you input corresponds with how much of that color you want. The alpha is how dark or light you want it.

Here is a great tool you can use to find the color you want. You can also use Photoshop, just look for RGB when you select your color.

WITH OPACITY
WITHOUT OPACITY



Have fun with it, and remember, coding isn’t difficult until you find out the best and easy way to do it. :)