Blur Kernel size is limited message explained

The blur effect is an irreplaceable part of User Interface development. It allows designers and developers to achieve specific outcomes in their projects that cannot be trivially achieved otherwise. 

In Gameface/Prysm, one way to achieve this functionality is through the filter: blur(); CSS property. One simply needs to apply it to a particular element and pass a specific value as a parameter to achieve an effect like the one showcased below:

In regards to the filter:blur(); property, the following warning “Blur Kernel size is limited! Maximum single pass radius: X. Requested: Y”, can be produced in cases where the blur radius, which we calculate in the backend is above the limits we have defined. The warning could be a bit confusing since the blur radius outlined in it is different from the value passed in the property.

Generally, the filter: blur(); effect applies a Gaussian Blur to the target, which is calculated by using two-dimensional Gaussian functions. Below is a simplified formula to the one we use when computing the blur radius:

r = stdDev * <filter: blur(15px)> / 2

The value passed to the property does not define the actual blur radius but rather determines the standard deviation of the Gaussian function. A larger standard deviation (more than 2) will significantly blur the element, while a smaller one ~ 0.5 will blur it less. Let's take the following example into consideration, where we pass 15px to the property and get a standard deviation of around 3.26:

 r = 3.2552472 * 15 / 2 = 24.414354 px

The maximum blur radius for the blur effect is currently 94px. For cases where it exceeds the accepted limits, our rendering library(Renoir) will not draw the whole blur at once, but it will instead chain several smaller blurs one after another.

Something to keep in mind is that the warning outlined above does not explicitly indicate a problem but instead notifies that the blur is slightly more complicated and may have performance implications.