Gradient

Add soft layered gradients to backgrounds or placeholders with six palettes and scalable shape effects.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Gradient for built-in decorative gradients or avatar placeholders. Artistic colors are not ordinary UI theme colors; page surfaces and text still use semantic colors.

size sets both width and height and takes priority over width and height. seed keeps the graphic stable for the same subject.
Keep decorative graphics decorative. These colors belong to the artwork; continue using semantic Tokens for page text and surfaces.

Import

import { Gradient } from '@snowui-design-system/components';

Usage

Blue

Cyan

Green

Red

Orange

Purple

API Reference

Property	Type	Default	Example	Description
`variant`	`GradientVariant`	`—`	`variant={value}`	Choose one of six fixed colors corresponding to Frame 200 from left to right.
`seed`	`string \| number`	`—`	`seed="Example"`	Only when as="avatar-image" and variant is omitted, choose one of six colors consistently. A color name can select its matching variant directly.
`size`	`number \| string`	`—`	`size="Example"`	Set width and height together; takes priority over width and height.
`width`	`number \| string`	`—`	`width="Example"`	Width; numeric values are treated as pixels.
`height`	`number \| string`	`—`	`height="Example"`	Height; numeric values are treated as pixels.
`radius`	`number \| string`	`—`	`radius="Example"`	Outer clipping radius; numeric values are treated as pixels.
`motion`	`boolean`	`—`	`motion`	Whether the four colored SVG layers animate continuously. With Avatar motion=false, ripple deformation can still run on hover without changing the multicolor Overlay. Defaults to true for ordinary Gradient and false for as="avatar-image".
`avatarHoverActive`	`boolean`	`—`	`avatarHoverActive`	Hover artistic-color feedback for the avatar variant controlled by its Avatar host. When omitted, the component uses its own interaction detection. Does not affect non-avatar variants.
`decorative`	`boolean`	`true`	`decorative`	Decorative art is hidden from the accessibility tree by default. When false, also provide aria-label.