How to Change the Opacity of a Background Color in Tailwind
While incorporating creative effects on the site to make it appealing, the “Opacity” plays a vital role in enhancing the site’s layout by fading out the applied colors on the site in accordance with the content. Moreover, this feature also assists the developer to control the color intensity in a custom manner and apply it to a functionality accordingly.
This write-up explains the below-given content areas:
- How to Change/Control the Opacity of a Background Color in Tailwind?
- Background Opacity Properties.
- Changing the Opacity of the “<div>” Background Color in Tailwind.
- Changing the Opacity of the “<textarea>” Background Color in Tailwind.
How to Change/Control the Opacity of a Background Color in Tailwind?
The opacity of a background color can be changed and controlled with the help of the “bg-opacity-{amount}” utilities.
Note: The opacity can be changed from 0 to 100.
Syntax
Background Opacity Properties
| Class | Properties |
| bg-opacity-0 | –tw-bg-opacity: 0; |
| bg-opacity-5 | –tw-bg-opacity: 0.05; |
| bg-opacity-10 | –tw-bg-opacity: 0.1; |
| bg-opacity-20 | –tw-bg-opacity: 0.2; |
| bg-opacity-25 | –tw-bg-opacity: 0.25; |
| bg-opacity-30 | –tw-bg-opacity: 0.3; |
| bg-opacity-40 | –tw-bg-opacity: 0.4; |
| bg-opacity-50 | –tw-bg-opacity: 0.5; |
| bg-opacity-60 | –tw-bg-opacity: 0.6; |
| bg-opacity-70 | –tw-bg-opacity: 0.7; |
| bg-opacity-75 | –tw-bg-opacity: 0.75; |
| bg-opacity-80 | –tw-bg-opacity: 0.8; |
| bg-opacity-90 | –tw-bg-opacity: 0.9; |
| bg-opacity-95 | –tw-bg-opacity: 0.95; |
| bg-opacity-100 | –tw-bg-opacity: 1; |
Example 1: Changing the Opacity of the “<div>” Background Color in Tailwind
This example changes the opacity of the element i.e., “<div>” background color with different opacity values:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class= "bg-gray-500 bg-opacity-100 text-2xl">Changing the Opacity of a Background Color</div>
<br>
<div class= "bg-gray-500 bg-opacity-75 text-2xl">Changing the Opacity of a Background Color</div>
<br>
<div class= "bg-gray-500 bg-opacity-50 text-2xl">Changing the Opacity of a Background Color</div>
<br>
<div class= "bg-gray-500 bg-opacity-25 text-2xl">Changing the Opacity of a Background Color</div>
<br>
<div class= "bg-gray-500 bg-opacity-0 text-2xl">Changing the Opacity of a Background Color</div>
<br>
</body>
</html>
In this snippet of code:
- First, specify the CDN path within the “<head>” tag to make use of the Tailwind functionalities.
- After that, create five “<div>” elements comprising the set background color (same in all) and different opacity values via the “bg-opacity-{amount}” utility that fades out the applied background color accordingly in each case.
- It is such that the less the opacity, the more the background color fades out.
- The “text-2xl” class represents the font size.
Output
This outcome implies that the opacities are applied to the background color appropriately.
Example 2: Changing the Opacity of the “<textarea>” Background Color in Tailwind
The following code demonstration changes the opacity of the “<textarea>” element’s background color instead:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<textarea class= "bg-gray-500 bg-opacity-100 text-2xl">Changing the Opacity of a Background Color</textarea>
<br>
<textarea class= "bg-gray-500 bg-opacity-75 text-2xl">Changing the Opacity of a Background Color</textarea>
<br>
<textarea class= "bg-gray-500 bg-opacity-50 text-2xl">Changing the Opacity of a Background Color</textarea>
<br>
<textarea class= "bg-gray-500 bg-opacity-25 text-2xl">Changing the Opacity of a Background Color</textarea>
<br>
<textarea class= "bg-gray-500 bg-opacity-0 text-2xl">Changing the Opacity of a Background Color</textarea>
<br>
</body>
</html>
According to this code, repeat the methodologies for incorporating the Tailwind CDN path. Likewise, specify the background color and the opacity levels that fade out the element’s background color.
Output
As seen above, the background color’s opacity is transitioned accordingly.
Conclusion
The opacity of a background color in Tailwind can be changed and controlled with the help of the “bg-opacity-{amount}” utilities. The amount specified in this utility ranges from “0” to “100”. It is such that the less the opacity, the more the background color fades out.
Source: linuxhint.com