Documentation menuDocumentation
Gradient documentation
Accessible color scales from one brand color, where the step number tells you the contrast. Light and dark mode, OKLCH, export for Tailwind and CSS.
Try the live demoStart
Guides
- What the steps promiseContrast targets of each step and the color pairs that are safe to use.
- Dark modeHow the dark scale works and how to switch between light and dark.
- Tailwind CSSUse Gradient scales as Tailwind CSS v4 theme colors or in a Tailwind v3 config.
- CSS, tokens and JSONExport the palette as CSS custom properties, W3C design tokens or plain JSON.
- CLIAll options of the gradient command.