Gradient

Name	Type	Description
色A color_a	Color	始点色を外から差し替えます
色B color_b	Color	終点色を外から差し替えます

Name	Type	Description
画像 output	Image	生成したグラデーション画像です

Parameters

Name	Type	Default	Range	Description / Options
方式 mode	Enum	Linear	—	どの形のグラデーションを作るか選びます線形`Linear` まっすぐな方向に沿って 2 色を補間します放射`Radial` 中心点から外側へ向かって 2 色を補間します
幅 width	Int	64	1–1024	出来上がる画像の幅です
高さ height	Int	64	1–1024	出来上がる画像の高さです
色A color_a	Color	[0,0,0,1]	—	グラデーションの始点色です
色B color_b	Color	[1,1,1,1]	—	グラデーションの終点色です
角度 angle	Angle	0	— / step 1	画像のピクセル座標上で指定する線形グラデーションの向きです
中心X center_x	Float	0.5	0–1 / step 0.01	放射グラデーションの横方向中心位置です
中心Y center_y	Float	0.5	0–1 / step 0.01	放射グラデーションの縦方向中心位置です
半径 radius	Float	1	0.01–2 / step 0.01	放射グラデーションの広がりです。1.0 は短辺の半分を表します

Overview

Creates a two-color linear or radial gradient image. In addition to serving as a base for skies and backgrounds, it is a fundamental continuous-value map—"top to bottom" or "center outward"—for mask weights, height maps, dither input, and more.

Usage tips

For a pixel-art sky, Linear (vertical) → dither (2–4-color palette) is the go-to two-node setup.
In black and white, it is a versatile weight map: a soft mask for blend_by_mask, a Multiply asset that darkens toward the bottom, or a radial vignette.
A radial gradient with a small radius is a base for a spotlight. center_x/y use relative coordinates from 0 to 1.
For a multicolor gradient, create grayscale values here and pass a palette to gradient_map instead. This also makes the color count easier to manage.

Common pitfalls

Banding is distracting: the continuous gradient itself is smooth; bands appear after quantizing and may be the right pixel-art result. Use dither when smoothness should be preserved.
A diagonal gradient points in an unexpected direction: the fastest solution is to rotate angle while watching its angle knob.

Notes

With mode = Linear, the two colors are interpolated along angle in image pixel space, so the specified angle matches the on-screen direction even on a non-square canvas.
With mode = Radial, the two colors are interpolated outward from center_x / center_y over radius.
radius = 1.0 is based on half the shorter dimension.
color_a and color_b can be set as parameters or input ports. Input ports take priority.

Compatibility

v2 evaluates Linear angles in pixel space instead of UV space. Diagonal gradients on non-square canvases therefore look different from v1.

Examples

Create a horizontal background gradient.
Use a radial gradient as the base for a mask or coordinate map.
Feed it into Palette Quantize or Dither to create retro color steps.

Related nodes

gradient_map — color with a multicolor ramp
dither — the companion for a retro sky
noise_generate — a nonuniform continuous-value map
blend — overlay a light/dark gradient in Multiply mode

Input Ports

Output Ports