Add blur background css

How to do a background blur in css

/* Answer to "blur behind element css" */

/*
	This blurs everything behind the element it's applied to
*/

backdrop-filter: blur(10px);

Blur css

.mydiv { filter: grayscale(50%) }

/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
img {
  filter: grayscale(0.5) blur(10px);
}

Source: developer.mozilla.org

Add blur background css

backdrop-filter: blur(5px);

Source: blog.prototypr.io

Css blur background image only

// best workaround is two images layered... (one on left is on top)
background-image: url(opaque_blurred.png), url(regular_bakground_img.jpg);
// BAM! that right there is worth at least a buck donation ;-)

-1

Similar codes

0 vote156 views1 answer
Bootstrap 3 progress bar animation
CSS Bootstrap
0 vote162 views1 answer
Api not working in github pages
CSS
17 votes177 views3 answers
Text orientation css
CSS
1 vote161 views1 answer
Style rule that expands the element to cover any floating content within the element
CSS
17 votes193 views1 answer
Yarn start not working on windows because scripts disabled
CSS
54 votes165 views8 answers
Media query
CSS
-1 vote152 views2 answers
Input uppercase with css
CSS
5 votes156 views3 answers
Css window height
CSS
5 votes149 views2 answers
How to rotate image 360 degrees in css
CSS
1 vote262 views1 answer
Overflow scrollbar with variable height
CSS