1

is there a possibility to blur everything ouside a div container? We have a background image and want everything around a centered div container to be blured. Through the container the background image shall be clear.

If this is not possible to solve with pure css, is there a javascript solution for this?

Edit: This is what we are trying to accomplish. Since we have no idea how we could do this, there was practiacally no code written. Also we are just asking for a idea how this may be done and not for working source code.

enter image description here

Edit 2: Obviously the one who marked this question as a duplicate did not understand the problem.

Edit 3: Since it seems not to be clear to some special cases in the comments: the div container is empty and has a transparent background.

Alexander Belokon
  • 1,452
  • 2
  • 17
  • 37
  • share your code structure – Temani Afif Jun 23 '18 at 09:41
  • May be this link helps you. https://stackoverflow.com/questions/42979398/how-to-blur-background-image-of-div-without-blurring-the-remaining-site-or-the – AMZ Jun 23 '18 at 09:48
  • see my last edit – Alexander Belokon Jun 23 '18 at 10:08
  • 1
    Yes, this os possible, I did exactly this recently. You’ll need WebGl and three.js to render a blurred version of your Image. then you clip the part you don’t want to blur. It works fantastic, i’m Using it to render animated birds behind a blurred scene. Just write a helper that renders the transparent three.js objects from a dom selector to match the position of the window div. And you have a working real-time blur – Moritz Roessler Jun 23 '18 at 10:35
  • 1
    You can easily do this with canvas as well, however, on iOS the canvas blur filter creates an ugly artifact. WebGl works way more consinstently across devices. – Moritz Roessler Jun 23 '18 at 10:36
  • I will check this out, thank you. you are welcome to post an answer so I can mark it later on if this worked out. – Alexander Belokon Jun 23 '18 at 10:39
  • The one who closed the question added more duplicates ;)... you may notice that your question is too broad thus off-topic on this site ... and oboviously with a simple google search you can get a ton of examples with code that you can start with : https://www.google.com/search?q=blur+only+a+part+of+the+image+css+site:stackoverflow.com&sa=X&ved=0ahUKEwi5lNfL1-nbAhWDVBQKHQ7HBAEQrQIIMigEMAA&biw=1600&bih=794 – Temani Afif Jun 23 '18 at 11:32
  • @TemaniAfif then why can't you deliver even one fitting example to this topic? ALL your examples are off topic – Alexander Belokon Jun 23 '18 at 12:28
  • I see edit3 it's not obvious why you cant put the same background in your front div without using the blur effect, use the background offset properties so that the clear image aligns properly. in other words, explain why you need a transparent div. – Jasen Jun 23 '18 at 22:03
  • Suggested "duplicates" seem to solve the reverse problem: applying the blur effect to the area _inside_ the given shape, not _outside_ it. The native CSS method (`backdrop-filter`) also does the former. In my opinion, the most practical approach would be just _faking_ the effect by blurring the whole background and applying to the `div` the non-blurred _copy_ of the background, adjusting the `background-position` so the images would match. – Ilya Streltsyn Jun 23 '18 at 22:20
  • We want the div to be transparent for the reason that the background may be dynamic or the div may be movable. – Alexander Belokon Jun 24 '18 at 12:56

0 Answers0