Generate Gradient
ui_generate_gradientGenerate CSS gradients from a base color with automatic color stops, supporting linear and radial types plus color harmony options for cohesive transitions.
Instructions
Generate a CSS gradient from a base color with automatic color stop generation.
Supports linear and radial gradients with configurable angle and number of stops. Color stops are generated using color theory for harmonious transitions.
Args:
base_color (string): Hex color code for the gradient base (e.g. "#6366F1")
type (string, optional): Gradient type — 'linear' or 'radial'. Default: 'linear'
angle (number, optional): Gradient angle in degrees for linear gradients (0-360). Default: 135
stops (number, optional): Number of color stops (2-5). Default: 3
direction (string, optional): Color shift direction — 'analogous' (nearby hues), 'complementary' (opposite hue), 'triadic' (spread hues). Default: 'analogous'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: CSS gradient string, color stops, and raw values.
Examples:
Purple linear gradient: base_color="#6366F1", angle=135
Blue to orange complementary gradient: base_color="#3B82F6", direction="complementary"
Radial triadic gradient: base_color="#10B981", type="radial", direction="triadic"
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | Gradient type | linear |
| angle | No | Angle in degrees (linear only) | |
| stops | No | Number of color stops (2-5) | |
| direction | No | Color shift direction | analogous |
| base_color | Yes | Base hex color (e.g. '#6366F1' or '6366F1') | |
| response_format | No | Output format | markdown |