CSS filter generator that respects the order

Yes, and usually by more than people expect, because filter is a pipeline in which each function receives the previous one's output. blur(4px) brightness(160%) brightens an image that has already been softened, so the bright halo bleeds outward past the element; brightness(160%) blur(4px) brightens first and then smears highlights that have already clipped at white, which reads flatter. Even two functions whose matrices would commute stop commuting once a channel clips, because every function's result is clamped to the 0-1 range before the next one reads it and a channel pinned at 1 has lost the headroom the next function needed. The order check under the tool runs your chain both ways over four sample colors and reports the CIE76 ΔE between them.

Because an ancestor has a filter on it. Any filter value other than none makes that element a containing block for its absolutely and fixed-positioned descendants, so a fixed modal or a sticky header inside it starts resolving against that element instead of the viewport. What makes this hard to find is that the culprit is often invisible: filter: blur(0px) or filter: grayscale(0), added to nudge an element onto the GPU, changes not one pixel and still moves the containing block. The panel at the bottom of the tool shows the same badge landing in two different places in two boxes that differ only by blur(0px).

drop-shadow reads the alpha channel of everything the element paints; box-shadow reads the element's border box. On a transparent PNG, an SVG mark or a clipped shape, drop-shadow traces the artwork itself — holes included — while box-shadow puts a rectangle behind it. The costs are real: drop-shadow takes no spread, no inset and no comma-separated list of layers, and the renderer has to rasterize the whole subtree before it can read the alpha. For a plain rectangular card, box-shadow is both cheaper and more capable, and it does not drag in the containing-block behavior above.

Because hue-rotate is a fixed 3×3 matrix approximation rather than a rotation in a hue-preserving color space. The matrix in the spec is built out of the Rec. 709 luma constants 0.213, 0.715 and 0.072, and it holds neither saturation nor lightness steady, so a saturated orange rotated 180° arrives at a muted blue rather than at its true complement, with any channel that leaves the 0-1 range clipped on the way. Rotating twice by 180° does not reliably return the original color either. When you need an actual complement, derive it from the color, not from the filter.

Only smoothly when both chains list the same functions in the same order. CSS interpolates the filter list item by item: if the shorter list is a prefix of the longer one, the missing entries are filled in with their identity values and the animation runs, but if the function at any position differs the property becomes non-interpolable and snaps from one value to the other. The practical rule is to write every keyframe with the full chain and use identity values — blur(0px), saturate(100%), hue-rotate(0deg) — as placeholders instead of omitting functions. Wide blurs also repaint on every frame, so animating one across a large element is where the frame budget goes.

Because the blur averages in the transparent area outside the element, so a full-bleed background image blurred in place comes out with soft, washed-out borders. The element's painted region stops at its border box and there is simply nothing beyond it to sample. The fix is to make the blurred layer bigger than the part you show: scale it up by roughly the blur radius on every side, or inset the visible container, and clip the overflow on the parent. This is also why a blurred element visually spills past its own box — the blur is ink, and like any filter output it is not clipped to the border box unless something else clips it.

filter changes the element and everything inside it; backdrop-filter changes whatever is painted behind it and leaves the element's own content sharp. If a card's label is going grey along with its background, the effect is on the wrong property. Frosted glass, where the panel stays crisp and the page under it softens, is always backdrop-filter and has its own page here. Screenshots, logos, thumbnails, disabled controls and any decorative imagery are the filter case, which is what this builder is for.