🎛️ CSS Filters

CSS Filters is the "if you know CSS, you know this node" effect. It gives you the exact eight filters from the web's filter: property - blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert - as ComfyUI inputs, in the same percentages you'd write in a stylesheet. If you've ever done filter: sepia(40%) contrast(120%) on a website, you already know exactly what this node does.

That familiarity is its whole selling point. Instead of learning a new grading paradigm, you get predictable, Photoshop-lite adjustments that compose well together. It's a quick-adjust node for the end of your pipeline - throw it in when you want "slightly more contrast" or "make it sepia" without building a curves graph. There's even a small web UI in the pack (css_filters.js) for the node, a nicety most of this pack's nodes don't have.

How it works

Each filter maps directly onto its CSS equivalent. Brightness, contrast and saturate take a percentage where 100 = no change (so contrast: 120 is 120%). Grayscale, sepia and invert take 0–100% as the amount of the effect. Hue-rotate rotates the hue wheel by degrees (−180 to 180). Blur is a Gaussian radius in pixels. Under the hood it's Pillow's ImageEnhance for the linear ones and OpenCV for the channel-based transforms, all blended by the percentage amounts - so a 50% grayscale is a real half-strength desaturation, not a binary on/off.

Because everything is percent-based and independent, you can stack all eight at once and they compose the way CSS chains them, in the order the node applies them.

The inputs that matter

• brightness (0–300, default 100) - 100 is identity; 50 halves, 150 boosts.
• contrast (0–300, default 100) - same scale; this is the one you'll reach for most.
• saturate (0–300, default 100) - 0 is grayscale, 150 is punchy.
• grayscale / sepia (0–100) - amount of the effect, for retro styling.
• hue_rotate (−180 to 180) - degrees of hue rotation.
• invert (0–100) - amount of inversion.
• blur (0–20) - Gaussian radius in pixels.

Output is a single IMAGE. Wire it anywhere an image goes - but realistically it belongs right before Preview/Save.

Installing it

Ships in ComfyUI-Image-Effects (Orion4D). ComfyUI Manager → search "Image Effects", or:

cd ComfyUI/custom_nodes
git clone https://github.com/orion4d/ComfyUI-Image-Effects
cd ComfyUI-Image-Effects
pip install -r requirements.txt

Restart, then it's under Add Node → Image Effects. It needs Pillow and OpenCV, which the pack's requirements install - no models.

Gotchas

Same pack-wide caveats: only the first image of a batch is processed, and it's CPU-bound. The subtle thing with CSS-style percentage filters is that the effects are applied in a fixed internal order - the node applies blur, then brightness, then contrast, then saturate, then the rest - so if you're chasing a specific blend, you may need two of these nodes in series to get the order you want. And remember these are quick global adjustments: for real control over tones, the pack's Curves and Levels nodes are the heavy artillery; this is the polish pass.