Let's look at how we can create this cool blurred effect.

//Woah, so how does this work? 





// Let's take a looksy <3 

Let's get into it.

I'm using React, but this logic should work for most frameworks that can manage the state.

import React from 'react';
const Box = () => {
// logic goes here
return (
  <div>
  I am a div
  </div>
  )
} 

The way I currently implemented this was just to useState() and set it to true or false

  import React, { useState } from 'react';
  
  export const Box = () => {
  const [blurred, setBlurred] = useState(false);
  
  return (
    <div onClick={()=> setBlurred(!blurred)}>
    I am a div.
    </div>)
  }

Now when we click on our <div>, the state will be either true or false.

But how do I apply the blur effect? There are a couple of ways you could do this, I'm just going to show you using the style prop since I'm using React components.

.blur {
  filter: blur(5px);
}

We can use the .css property filter:

filter: will allow us to use the blur effect, which makes it so easy for us.

  import React, { useState } from 'react';
  
  export const Box = () => {
  const [blurred, setBlurred] = useState(false);
  
  return (
    <div className={blurred && 'blurred'}
      onClick={()=> setBlurred(!blurred)}
      style={{
        filter: blurred && 'blur(5px)',
        backgroundColor: 'tomato',
        padding: '10px'
      }}>
    I am a div
    </div>)
  }

Now you just need to add a button if you'd like to control the blur from outside the div.