Nodes/NDDG_Great_Nodes/🍄Great Interactive Organic Gradient
ComfyUI Node

🍄Great Interactive Organic Gradient

A gradient you can drag around with your mouse

By NeoDroleDeGueule·Created 10 months ago·Updated 9 months ago· 14
🍄Great Interactive Organic Gradient
    • image
    • palette_image
    • palette_hex
    â—„width512â–ş
    â—„height512â–ş
    â—„blob_shapeâ–ľâ–ş
    â—„blur_strength0.40â–ş
    â—„blob_size0.25â–ş
    â—„blob_opacity0.50â–ş
    â—„radial_smoothness1.5â–ş
    â—„gradient_data[{"x":0.2,"y":0.5,"color":"#ff3300"},{"x":0.8,"y":0.5,"color":"#00ffe1"}]â–ş

    Most gradient generators in ComfyUI are "type numbers, pray." This one is the exception in the NDDG_Great_Nodes pack: it puts a live canvas right on the node where you drag color stops around with your mouse, watch the gradient update, and hit a Reset button when you've made a mess. It's the curated, hands-on sibling of the pack's random gradient node - same family of outputs, but you're in control instead of rolling dice.

    How it works

    Under the hood it's a soft inverse-distance color interpolation. You define color stops - points with an x/y position and a hex color - and the node computes, for each stop, the weighted blend of all the other stops' colors based on distance, then draws a shape at that spot. Repeat for every stop, blur the whole canvas, apply an opacity, composite, done. The result is a smooth organic wash where the colors bleed into each other.

    The stops live in the gradient_data input as JSON, like this default:

    [{"x":0.2,"y":0.5,"color":"#ff3300"},{"x":0.8,"y":0.5,"color":"#00ffe1"}]
    

    That's the red-to-cyan horizontal fade you start with. You can edit the JSON by hand if you're brave, but the whole point is that the bundled JavaScript gives you a canvas where you click to add stops, drag to move them, and pick their colors visually. There's a "Reset Gradient" button to get back to the default. The node forces itself tall enough to fit the editor, so don't be alarmed when it looks oversized on your graph.

    The inputs that matter

    • gradient_data - the stops. Position is normalized (x/y from 0 to 1), color is hex. This is the node's heart.
    • blob_shape - 11 options, from the sensible (circle, radial) to the decorative (donut, star, spore, blob_random). The shape is drawn at every stop's location, so switching it changes the whole texture.
    • blob_size (0.01–1), blob_opacity (0–1), and blur_strength (0–1) - how big, how solid, and how smeared the blobs are.
    • radial_smoothness (0.1–10) - controls how soft the radial falloff is on the radial-type shapes.

    Outputs are the same trio as the random gradient: image (RGBA, ready to composite), palette_image (a swatch strip), and palette_hex (the stop colors as a string). All three are handy - grab palette_hex and paste it into a prompt for color-consistent compositions.

    How to install it

    It ships with NDDG_Great_Nodes, so:

    cd ComfyUI/custom_nodes
    git clone https://github.com/NeoDroleDeGueule/NDDG_Great_Nodes
    

    or search NDDG_Great_Nodes in ComfyUI Manager, then restart. Pure Python plus a bit of front-end JS, no model downloads, no extra dependencies beyond what ComfyUI already has (and the pack-wide matplotlib caveat: if the whole pack fails to import with a matplotlib error, pip install matplotlib in ComfyUI's Python env sorts it).

    Common issues

    The one real trap: if you hand-edit gradient_data and get the JSON wrong, the node silently falls back to a red→blue default gradient rather than throwing an error. If your carefully-built background suddenly looks like a school poster, that's why - check the JSON, or just hit Reset Gradient and rebuild it in the canvas.

    It's also worth knowing this node is deterministic: no seed, so the same stops and settings always produce the same image. That's the point - unlike its random sibling, this one is for when you want that exact gradient, not a surprise. It's the kind of node you'll reach for when you're building layered composites and want a specific color field behind your subject, positioned exactly where you want it.

    Category🍄NDDG/Interactive

    Inputs (8)

    NameTypeDefaultDescription
    widthINT51264–2048—
    heightINT51264–2048—
    blob_shapeCOMBO11 options: circle, radial, donut, rectangle, horizontal_stripe, vertical_stripe, +5
    blur_strengthFLOAT0.400–1—
    blob_sizeFLOAT0.250.01–1—
    blob_opacityFLOAT0.500–1—
    radial_smoothnessFLOAT1.50.1–10—
    gradient_dataSTRING[{"x":0.2,"y":0.5,"color":"#ff3300"},{"x":0.8,"y":0.5,"color":"#00ffe1"}]—

    Outputs (3)

    NameTypeDescription
    imageIMAGE—
    palette_imageIMAGE—
    palette_hexSTRING—