How does blur radius value in box-shadow property affect the resulting blur?

user_14890605 0
Viewed 315

Lets say there's a drop shadow for the following div element.

div {
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: 60px 60px 50px black;
}

what does 50px mean to that element. That the size of kernel (no of pixels accounted for in calculation of new pixel value) is 50 ?

How does the standard deviation (by default half the blur radius) changes the outcome ?

Is it just the pixels that belong to the area (50px from the edge) that are blurred or the whole shadow?

Why after a certain maximum value of blur radius the effect is unchanged?

css
2 Answers

In my understanding the blur is generated from the middle of the shadow kernel point. So 25px outward and 25px inward. This is what I see when adding a fourth 'spread' property. In my experiments I didn't notice a value cap.

user_139864720

Standard definition of the box-shadow blur radius: The blur effect is now defined by css3-background and by HTML to be a Gaussian blur with the standard deviation (σ) equal to half the given blur radius, with allowance for reasonable approximation error.

The pixels nearest the center of the kernel are given more weight than those far away from the center. This averaging is done on a channel-by-channel basis, and the average channel values become the new value for the filtered pixel.

After a definite value the changes are so mere that they are invisible to human eye. That's why it seems like nothing is changing further.

user_140966560
Related