unocss-preset-chroma

chroma-js gradient for UnoCSS

Installation

npm i unocss-preset-chroma unocss --save-dev # with npm
yarn add unocss-preset-chroma unocss -D # with yarn
pnpm add unocss-preset-chroma unocss -D # with pnpm

Usage

// unocss.config.js
import { presetUno, defineConfig } from 'unocss'
import { presetChroma } from 'unocss-preset-chroma'

export default defineConfig({
  presets: [
    presetUno(), // for color theme
    presetChroma(),
  ],
})

Utilities

• Shorthand gradient + stops:

  chroma-(linear|radial|conic)-(rgb|lab|hsl|lch)-<colors>

  Where <colors> is dash-separated hex color.

• Stops only:

  chroma-stops-(rgb|lab|hsl|lch)-<color-1>-<color-2>-<color-n>

• Shape:

  chroma-shape-[contour/size/potiion/direction/etc]

• Base gradient function (background-image):

  chroma-(linear|radial|conic)

Type of ChromaOptions

export interface ChromaOptions {
  /**
   * Class prefix for matching gradient rules.
   *
   * @defaultValue `chroma-`
   */
  prefix?: string
  /**
   * Number of gradient steps to generate.
   *
   * @defaultValue 7
   */
  steps?: number
}

Acknowledgement

• Polychroma
• chroma.js
• Make Beautiful Gradients by Josh Comeau

License

MIT

Demo

Clone the repo, run pnpm dev.