Using RGBA in CSS


Yes, you read that correctly. RGBA (it means Red, Green, Blue, Alpha in case you didn’t know:). It is used to tell the browser how much amount of each of the three colours you want. it ranges from 0-255. And the Alpha is used to turn down the opacity of the colour.

But, wait. Shouldn’t we use opacity??

the straight simple answer is, No.

Because, when you use opacity, the opacity is decreased of the whole element. But, when you use alpha property, you just change the opacity of the inline element. To put it simply, if you want only the current element to be opacity fine-tuned, you SHOULD use Alpha instead of opacity. This way you can just tune down or up the opacity of the current element not the whole element. And you can use it in different areas.

Enough talking lets get our hands dirty with code.


    rgba: 255,200,50,1;
    width:250 px;
    height: 200 px;
    content: blah,blah,blah;

You can see above that the class of box is being applied the rgba property as well as some height, width, and content, so it can be showcased.

The last value of rgba is alpha. It is used to transparent-ify [looks like I’m becoming a master of making new words] the current part [or element]. This is pretty useful in many cases using opacity on just the first part.

Well, hope you learned something today. Please tell me some use cases in the comment below (↓). until next post.

Enter your email address to follow this blog and receive notifications of new posts by email.

One thought on “Using RGBA in CSS

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s