xxxxxxxxxx
/* To blur an image using CSS */
/* Add the blur effect to the image */
.blur-image {
filter: blur(5px); /* Adjust the blur radius as per your requirement */
}
/* Example usage: */
<img src="image.jpg" class="blur-image" alt="Blurred Image">
xxxxxxxxxx
/* Answer to "blur behind element css" */
/*
This blurs everything behind the element it's applied to
*/
backdrop-filter: blur(10px);
xxxxxxxxxx
/* Setting background image and filter to blur */
body{
background-image: url("software_code_3.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: whitesmoke;
backdrop-filter: blur(8px);
/* -webkit-filter: blur(8px); */
}
/* creating a kind of "glass-polymorphism" effect with a light-dark background*/
.container {
border: 1px;
border-radius: 5px;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
padding: 20px;
}
xxxxxxxxxx
/* Add the blur effect in CSS */
filter: blur(8px);
-webkit-filter: blur(8px);
xxxxxxxxxx
.blur-image {
background-image: url("path/to/image.jpg");
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px); /* Safari support */
}
xxxxxxxxxx
<style>
.container {
background-image: url('background-image.jpg');
background-size: cover;
filter: blur(8px); /* Adjust the blur intensity as per your requirement */
-webkit-filter: blur(8px); /* For Safari compatibility */
height: 100vh; /* Set the desired size for the blurred background */
}
</style>
<div class="container">
<!-- Your content goes here -->
</div>
xxxxxxxxxx
.blurredElement {
/* Any browser which supports CSS3 */
filter: blur(1px);
/* Firefox version 34 and earlier */
filter: url("blur.svg#gaussian_blur");
/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
-webkit-filter: blur(1px);
}