How to apply blur effect in css?
Snippet Code
Css blur is used to create an blur effect on the image. The sample code to create a blur effect on image using css is given below.
<style>
.background-image {
position: fixed;
z-index: 1;
padding:100px;
display: block;
background-image: url('http://newflowerwallpaper.com/download/natural-flowers-images-and-wallpapers/natural-flowers-images-and-wallpapers-21.jpg');
width: 500px;
height: 500px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
</style>
<div class="background-image"></div>
Tags