CSS filter generator

Per the CSS Filter Effects spec: blur takes a length (0–20px covers most uses), hue-rotate takes an angle (0–360deg), the unitless brightness, contrast and saturate values use 1 as the identity with 0–3 enough for dimming and boosting, and grayscale, invert, opacity and sepia are ratios from 0 to 1. Values outside the range raise an error here instead of silently producing a declaration the browser drops.

Yes. The chain applies left to right and each function consumes the previous output. Blurring before brightening brightens the already-softened pixels, while brightening first changes how the blur blends the edges, so the two orders are not equivalent.

filter processes the element itself, background and children included; backdrop-filter processes only what is behind the element, which is why it powers frosted-glass headers. The values transfer directly, but the element needs a translucent background before you can see any effect.

box-shadow always follows the element box, so a transparent PNG or text shows a rectangular shadow; drop-shadow follows the opaque pixels that were actually painted, which suits icons and irregular shapes. The trade-off is performance: drop-shadow is more expensive, so avoid animating it over large areas.

They can. Filters usually run on the GPU compositor, so a static effect is cheap, but animating one over a large element or stacking several blurs can drop frames. Keep filters on small elements and, when animating, pair them with will-change or pre-bake the effect into the image.