/* Answer to "blur behind element css" */
/*
This blurs everything behind the element it's applied to
*/
backdrop-filter: blur(10px);
/* 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;
}
/* Add the blur effect in CSS */
filter: blur(8px);
-webkit-filter: blur(8px);
background: transparent;
backdrop-filter: blur(10px);
.mydiv { filter: grayscale(50%) }
/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
img {
filter: grayscale(0.5) blur(10px);
}
filter: blur(8px);
-webkit-filter: blur(8px);
.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);
}
backdrop-filter: blur(6px);