rgba() Function with Example in CSS

CSS | rgba() function: Here, we are going to learn about the rgba() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 18, 2020

Introduction:

Functions are used regularly while we are developing a web page or website. Therefore, to be a good developer you need to master as many functions as you can. This way your coding knowledge will increase as well and you will not have to bother to write long codes. Using functions optimizes your codes as that long coding is replaced by abstract functions. So, whenever you are free just go through some functions which you have not heard about and start learning them and implement them in your code. This article is not any different, this article also focuses on one such function that would prove to be very useful for you in your web development. So, without much adieu let us take this discussion forward.

Definition:

rgba() function is a very popular function, you will see this function in almost every web page or website. It seems like an important function too right? Indeed it is, let us understand this function with the help of its definition and syntax.

rgba() function is a very easy-to-understand function and it is used almost regularly, so what does it actually do? Keep reading for the answer.
RGBA stands for Red, Blue, Green and Alpha. These four values together make up the rgba() function. You must be familiar with red, blue and green colors but what does alpha do? Well, alpha is used for transparency or opacity. If you set the value of alpha to 0, then your element would be transparent and if you set it to 1, then it would be nothing but opaque. Well, that is all for the rgba() function. So, let us move forward and have a look at the syntax of this function,

Syntax:

    element{
        color:rgba(red,blue,green,alpha);
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            background-color: rgba(24, 253, 0, 1);
            font-size: 50px;
            color: rgba(234, 0, 0, 1);
        }
    </style>
</head>

<body>
    <p>My name is Anjali Singh.</p>
</body>

</html>

Output

In the above example, both the font and the background color are set through the rgba() function.

You would be amazed by this function when you put it to use. This function will present to you about thousands of colors and with different shades for you to use. By making use of these colors you can make your website or web page attractive and stylish. So, don't miss the chance to play around with this function and explore as many colors as you can.

Conclusion:

To make the right use of this function, first select a theme for your website or web page, whether you want your website or web page to be dark or bluish or reddish. Once you have decided that then you are all set to select colors for your elements that go with the overall theme of your web page or website.

CSS Functions »

CSS | rgb() Function

CSS | linear-gradient() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples