How to blur background color of body using css?

Question

I have set the background colour to a linear gradient and I want the background colour to be a blur. I have tried a few codes but couldn't make it work. Here is my code:

body{
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 200px; /* Make sure the body is visible */
    width: 200px;
}

<body>
</body>

I am learning CSS, please help me! Thank you in advance!

Do you want the whole page, including all of the text to be blurry? — disinfor, Aug 30 '21 at 18:06

score 2 · Answer 1 · answered Aug 30 '21 at 18:01

2

Just try adding filter: blur(8px);, -webkit-filter: blur(8px);.

Code:

body {
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

You may increase the blur by changing 8px into any number you want.

For example, 10px:

filter: blur(10px);, -webkit-filter: blur(10px);.

Learn more in MDN.

answered Aug 30 '21 at 18:01

Kevin M. Mansour

2,915
6
18
35

This will blur all of the content on the page. – disinfor Aug 30 '21 at 18:03
@disinfor Isn't that what the OP want? – Kevin M. Mansour Aug 30 '21 at 18:04
The question isn't clear enough to tell. – disinfor Aug 30 '21 at 18:05
Thank you,I got the solution!! I wanted the background colour of the body to be blur! – noobaka Aug 30 '21 at 18:08

score 1 · Accepted Answer · edited Jun 25 '23 at 03:13

Just set the background separately from the body, i.e. you can use a pseudo element and filter just this pseudo.

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(100deg, #3B53D6,#4AFAFA);
    filter: blur(10px);
}

score 0 · Answer 3 · answered Aug 30 '21 at 18:02

You can make the gradient a pseudo element on the body and blur that:

body {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg, #3B53D6, #4AFAFA);
  filter: blur(5px);
  z-index: -1;
}

<body>
  <div>
    content content content
  </div>
</body>

If you add filter: blur() to the body, that will blur all of the children as well.

How to blur background color of body using css?

3 Answers3