Gradient Mixer

Цветовые точки на холсте и экспорт многослойного CSS-градиента. Бесплатно, MIT · Изображения и генерация › Мини-редакторы

Установка

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';

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.