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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="flex h-screen justify-center items-center flex-col"> <div class="w-full h-[50vh] bg-[url('https://placekitten.com/1400')] bg-cover bg-center"> <div class="w-full h-full flex justify-center items-center backdrop-blur-md"> <span class="text-white text-4xl w-1/2 text-center">Here is a cute little kitten in the Background</span> </div> </div> </div> |
The output of the above code :
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// removes background blur effect backdrop-blur-0 // removes background blur effect backdrop-blur-none // blur(4px) backdrop-blur-sm // blur(12px) backdrop-blur-md // blur(20px) backdrop-blur-lg // blur(24px) backdrop-blur-xl // blur(40px) backdrop-blur-2xl // blur(64px) backdrop-blur-3xl |
Conclusion
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.