The lesser the value of a, the more transparent the color will be. Whereas the value of a has to be between 0-1. Each parameter (red, blue, green) defines the intensity of color between 0-255. The rbg in the rbga() function signifies color values for red, green, and blue, while a signifies the opacity of the color. The rgba() function defines colors using the red-green-blue-alpha model. Use the rgba() Function to Create Transparent Color in CSS The example below shows that the background color and the heading h1 get transparent as we keep the opacity value, i.e. If we want the heading and its background color to get more transparent, we can decrease opacity value. Set the background-color as #cc33ff and opacity value 0.4 after selecting the transparent class in CSS. However, while using opacity, the child element also gets transparent.įor example, create an HTML document with a heading h1 and a class transparent. If the opacity value is 0.5, the color will get semi-transparent or 50% transparent. If we decrease the value initially, the element will get more transparent. It means the color is not transparent at all. If the value is 1, it means the color is 100% opaque. We can use values between 0 to 1 to show the opacity of color or an element. The opacity is one of the properties used in CSS, especially with the colors. Use the opacity Property to Create a Transparent Color in CSS It will set the background opacity in CSS. In this article, we will introduce three methods to create transparent color in HTML using CSS. Use Hex Values to Create a Transparent Color in CSS.Use the rgba() Function to Create Transparent Color in CSS.Use the opacity Property to Create a Transparent Color in CSS.