Menu
Is it possible to code a div to enable it to blur whatever image is under it?
something like this:
Could this be done somehow with -webkit maybe?
552
The trick is to use background-position:fixed; on html / body and the element to blur on top of it, so , both background-image lays on the same area of the window. The duplicate uses an extra element, this can be a pseudo element if you do not wish to modify HTML structure. Flex can also be used to center body.
backdrop-filter: blur(10px); It will blur area behind the element.
You choose a suitable background-position for the outer div. Make inner div position:absolute . This is where the blur appears. Apply blur to the :before selector.
Blurring the background elements of a div can be achieved using backdrop-filter . All the elements placed under the div are going be blurred by using this.
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!
75
Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.
There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
