v150 · CSS · Color
Gradient Opacity Builder
Build a linear gradient using CSS relative alpha colors — alpha(from var(--color) / 50%) creates a 50%-transparent version of your base color. Pick a base color and the opacity at each stop; the preview applies the native alpha() function when the browser supports it and falls back cleanly when it does not.
Gradient configuration
Base color
used for all stops
Direction
gradient angle
Stop count
3–5
Preview
Adjust the base color and per-stop alpha values. Each stop uses relative alpha syntax so the hue and chroma are always derived from the base color — no risk of color drift.
Detecting
alpha() support…see also
- Overlay Builder — text overlays with relative alpha
- Dark Mode Palette — adaptive palette with alpha
- State Feedback — hover/focus states with relative alpha
- Token Transparency — design tokens + relative alpha
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗