AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Blur translucent background8/18/2023 ![]() We can also use a backdrop filter to make only the specified regions blur. We used the filter property to make the entire background image blur. In this tutorial, we have learned to add a blur background image with CSS. In this example, we apply the blur effect to a PNG image of a flower thats drawn on a transparent background. We have set the height to 100% whereas width to 50% of the parent container so that you can see the difference between both backgrounds. Here, we add backdrop-filter: blur( 5px) to blur the background of the element containing it. Example: Creating a blurry background image using a filter property įilter: blur(8px) /* Adding blur background image */īackground-color: rgba(256, 256,256,0.5) Įxample: Adding a blurred image with backdrop-filter But the backdrop-filter will not blur the whole background image instead it will blur the backdrop of foreground elements. Another CSS property to add blurred background images is backdrop-filter. Follow up the steps and create a blurred background image for your website. The blurry background can be created using the CSS filter property. Learn How to Apply a Blur Filter to a Background Image with W3docs tutorial. Here we will learn to create blur background images with CSS. With a blurred background, the user will easily differentiate other components on the page. Free for commercial use High Quality Images. 96000+ Vectors, Stock Photos & PSD files.
<-. Find & Download Free Graphic Resources for Transparent Blur.
For example, use hover:backdrop-blur-lg to only apply the backdrop-blur-lg utility on hover. A blur image background will enhance the web page's looks. Applying conditionally Hover, focus, and other states Tailwind lets you conditionally apply utility classes in different states using variant modifiers. Blur backgrounds are loved by websites developers.
0 Comments
Read More
Leave a Reply. |