xxxxxxxxxx
/* Add the blur effect in CSS */
filter: blur(8px);
-webkit-filter: blur(8px);
xxxxxxxxxx
/* Answer to "blur behind element css" */
/*
This blurs everything behind the element it's applied to
*/
backdrop-filter: blur(10px);
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);
}
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
<!DOCTYPE html>
<html>
<head>
<style>
.blur-image {
filter: blur(5px); /* Adjust the pixel value to control the blur effect */
}
</style>
</head>
<body>
<img src="path/to/your/image.jpg" alt="Blurry Image" class="blur-image">
</body>
</html>