Rothku painting blur

In step 35 we’re asked to give .one and .two a increase of blur by 1px.
The parent containter(.canvas) already has a blur of 2px, so i assume an increase of 1px would be 3px correct?

However blur(3px) appears to be wrong.
Whats going on here?
Simplified code:

.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
  filter: blur(2px);
}
.one, .two {
  <!--filter: blur(3px); Incorrect?-->
  filter: blur(1px); //Correct?
}

Link to Step: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting/step-35

The .one and the .two are already given a blur of 2px, you are asked to only increase the blur of the .one and the .two by 1px.

Giving a blur of 3px will increase the blur by three instead of one

But that makes very little sense.
It adds on?
Do other properties in this way do this?
What if i wanted to remove the blue for those two instead. Apparently blur(0) would add 0 to the already existing 2px.

Would this happen for properties such as margin/padding etc.

CSS is read by the computer from top to bottom so the .canvas class will be read first and it will apply the blur. Since the class modifications for .one and .two come after that they will be applied second. If you wished to remove the blur completely you would need to remove it from the .canvas class modifier. To add to the preexisting blur you could modify it where it is first listed or in the instance of this lesson you can modify it where you want it specifically which is in the classes .one and .two which adding blur here would add to the current preexisting modification. Does that make more sense?

I’m not sure if the math is that simple. I did a test and visually parent > blur(10px) + child > blur(10px) is not the same as child > blur(20px)

I’m sure there is a technical reason for it but I can’t say I’m confident enough to give one (it would be speculation).


None of this is related to the challenge, or the requirements. The test can’t look at the combined blur anyway, as the computed blur on the child is whatever gets applied to the child and not what comes from the parent. Not sure how you would check that in code (you might be able to look at the edge, again totally unrelated to the challenge and I’m just rambling now).