Blur Background Image in TailwindCSS

Often when you are working on a custom design, you need to make background images blur to make the text visible. In TailwindCSS, you can use backdrop-blur class to have a blur background image.

Background Blur Classes in TailwindCSS

Tailwind provides backdrop-blur class with different values to add a blur effect on background images. Here is a simple example to add background blur on an image in TailwindCSS. You can also check the working example online.

The output of the above code :

Blur Background Image in Tailwind CSS

Available Classes for Backdrop Blur

There are different classes available to change the blur value in TailwindCSS. Here is a list of all the classes available for backdrop-blur.


TailwindCSS provides different classes to make blur background images. This is very useful when you need to place text over an image. You can also add an overlay on background images with different colors if your design needs an overlay on images.


Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles