Gradient Mixer

Drag colour points over a canvas and copy the layered CSS gradient. Free, MIT · Image generation › Small editors

Editor of a layered background: colour points on a canvas, each a radial CSS layer with its own colour, opacity and two radii. Drag the points or move them with the arrow keys, set exact values in the panel, undo and redo whole actions, and copy CSS built by the same serializer as the preview.

Installation

npx valyro-cli@latest add gradient-mixer

npx shadcn@latest add https://valyro.xyz/r/gradient-mixer.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { GradientMixer } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`GradientValue`		The composition: a base colour and radial layers, the first one on top.
`defaultValue`	`GradientValue`	`DEFAULT_GRADIENT`	Initial composition when uncontrolled. Default: three colour points on a dark base.
`onValueChange`	`(value: GradientValue) => void`		Called with the whole new composition after each change (a drag reports once, when it ends).
`maxPoints`	`number`	`8`	Most layers. Default 8.
`historyLimit`	`number`	`50`	Most undoable actions. Default 50.
`showControls`	`boolean`	`true`	Panel with the layer list and exact fields. Default true.
`showExport`	`boolean`	`true`	The CSS code and its copy button. Default true.
`onExport`	`(css: string) => void`		Called with the CSS when it is copied.
`aspectRatio`	`number \| string`	`'16 / 9'`	Proportions of the canvas. Default `16 / 9`.
`colorPickerLabels`	`Partial<ColorPickerPopoverLabels>`		Texts of the colour pickers inside the editor.
`labels`	`Partial<GradientMixerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Pixel Painter — Draw on a pixel grid and save a PNG
Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting

Previous: Execution Queue · Next: Pixel Painter · All Image generation