Add Overlay on Background Image in TailwindCSS

When you are working on a custom design, you need to add an overlay to make the text visible over an image. In TailwindCSS, you can utilize the backdrop-brightness classes to add an overlay to an image.

Adding Black Overlay in TailwindCSS

Tailwind provides a backdrop-brightness class with different values to add an overlay on background images. You can add the opacity to whatever you want to control the overlay. Here is a simple example to add a background overlay on an image in TailwindCSS. You can verify the example online at play.tailwind.com.

The above code will create an overlay on an image like the screenshot below.

Adding Colored Overlay on Background Image

You can utilize backdrop-brightness class combined with background classes to add a colored overlay. You can add the opacity of the background color to change the opacity of the overlay. Here is a simple example of the colored overlay.

The output of the colored overlay will look like this :

How to Change the Color of Overlay

You can control the color and the brightness by changing the classes. The class bg-blue-600/30 in the above example is used to add a colored overlay and you can change the color as well opacity. The class backdrop-brightness-75used to control the brightness of the overlay. You can specify your own values for brightness as well as colors.

Conclusion

Adding overlay on a background is very useful to make the text visible on any image. You can combine background color with brightness classes in TailwindCSS to add an overlay on an image.