Building a filter stack
Each slider controls one CSS filter function. Moving Brightness to 120% adds brightness(120%) to the output; leaving it at its neutral 100% leaves that function out of the generated rule entirely, so the CSS you copy only lists the functions actually doing something.
Neutral values
Every filter function has a starting point where it has no visual effect: 100% for brightness, contrast, and saturate, 0 for hue-rotate, grayscale, sepia, invert, and blur, and 100% for opacity. Sliders below or above that point brighten, dim, saturate, or desaturate the element.
drop-shadow vs box-shadow
filter: drop-shadow() traces the actual rendered shape of an element, including any transparency, rather than its rectangular bounding box. That makes it the correct choice for casting a shadow behind a logo, icon, or cutout image; use box-shadow when the element is a plain rectangular card or panel.
Filter vs backdrop-filter
filter changes how an element and its children render. backdrop-filter instead blurs or adjusts whatever sits behind an element, which is the effect behind frosted-glass panels. This generator builds filter rules; reach for a glassmorphism-style backdrop blur separately when the effect needs to apply to the background rather than the element itself.