Nodes/ComfyUI 1hewNodes/Image Blend Mode by CSS
ComfyUI Node

Image Blend Mode by CSS

Every CSS blend mode, inside your ComfyUI graph

By 1hew·Created about a year ago·Updated 7 days ago· 33
Image Blend Mode by CSS
  • overlay_image
  • base_image
  • overlay_mask
  • image
blend_modenormal
blend_percentage100
invert_maskfalse

Multiply. Screen. Overlay. Color dodge. If you've ever done design work in CSS or Photoshop, these are old friends - and they're exactly the 16 modes this node puts on one dropdown, powered by the Pilgram library (the Python port of the image-blend techniques from the web world). It's the compositing node you reach for when "just put them on top of each other" isn't the look you're after.

How it works

You give it a base_image and an overlay_image, pick a blend_mode, and it applies the CSS-style blend math per-pixel. The modes you get:

normal, multiply, screen, overlay, darken, lighten, color_dodge, color_burn, hard_light, soft_light, difference, exclusion, hue, saturation, color, luminosity.

That's the full CSS mix-blend-mode set. multiply darkens where layers overlap, screen brightens, overlay does the contrast trick - all the standard behavior, none of it requiring you to leave ComfyUI for an image editor.

The inputs that matter

  • overlay_image / base_image - the two layers. Convention: overlay sits on top, base underneath, and overlay_image is the one the blend mode is applied to.
  • blend_mode - the dropdown above.
  • blend_percentage - 0-100, default 100. This is your opacity dial: at 50, the blend result is mixed halfway with the base, which turns any mode into a "just a hint of multiply" effect. It's the single most useful control on the node.
  • overlay_mask - optional. A mask that gates where the overlay applies, so you can blend into one region of the frame and leave the rest untouched.
  • invert_mask - flips that gate when false isn't doing what you want.

Output: image, the composited result.

When to reach for it

Texture work is the classic: multiply a grain or a paper texture over a flat render and it reads as depth instead of wallpaper. screen for light leaks and glows, color to tint a whole image from a single-color overlay, difference for the weird-inverted look people use in compositing debugging. Because blend_percentage exists, you can also cheaply "grade" a batch - a hint of soft_light over every frame is a poor man's color treatment that runs entirely in the graph.

Installing it

ComfyUI Manager, search "ComfyUI 1hewNodes", install, restart. Or:

cd ComfyUI/custom_nodes
git clone https://github.com/1hew/ComfyUI-1hewNodes

This node genuinely does need one extra dependency beyond the pack's core - pilgram - and it's in the repo's requirements.txt, so the standard install covers it. Everything else the pack drags in (rembg, ultralytics...) is irrelevant here.

Gotchas

blend_percentage is the thing people forget and then call the node broken. At 100 it's full-strength blend; drop it to 50 and the result is a half-mix that can look "washed out" until you remember why. And hue/saturation/luminosity modes only make sense when the overlay carries actual color information - a black-and-white overlay makes those modes do almost nothing, which confuses people every time.

Category1hewNodes/image/blend

Inputs (6)

NameTypeDefaultDescription
overlay_imageIMAGE
base_imageIMAGE
blend_modeCOMBOnormal16 options: normal, multiply, screen, overlay, darken, lighten, +10
blend_percentageFLOAT1000–100
invert_maskBOOLEANfalse
overlay_maskoptMASK

Outputs (1)

NameTypeDescription
imageIMAGE