Colors

Accepted formats

#rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla(), oklch(), oklab(), named colors (tomato) and transparent. Both comma and space syntax work.

One property

Plain strings animate options.property, which defaults to background-color:

new SmoothBackground('.title', { property: 'color', colors: ['#111', '#D4E66A'] });

Several properties at once

Use objects. Keys can be kebab-case ('border-color'), camelCase (borderColor) or CSS custom properties ('--accent'). For convenience, background means background-color, so background images and gradients are left alone.

new SmoothBackground('.card', {
  colors: [
    { background: '#D4E66A', color: '#2A3240', '--accent': '#2A3240' },
    { background: '#2A3240', color: '#EEF1EA', '--accent': '#D4E66A' },
  ],
});

If a property is missing from an entry, it keeps the value from the previous entry.

Gradients

Animate custom properties and use them inside a gradient:

.card { background: linear-gradient(135deg, var(--g1), var(--g2)); }

new SmoothBackground('.card', {
  colors: [
    { '--g1': '#D4E66A', '--g2': '#B6CEDD' },
    { '--g1': '#B6CEDD', '--g2': '#F3D9C8' },
  ],
});

Interpolation

Value	Result
'oklab' (default)	Perceptually even brightness, no hue detours. Same default as CSS color-mix().
'oklch'	Keeps saturation: vivid palettes stay vivid. The hue travels along the color wheel, so a transition can pass through other hues.
'rgb'	Classic browser blending, which usually dulls and darkens the midpoint.

Alpha is premultiplied, so fading from transparent never passes through a dark fringe. OKLCH results outside sRGB are gamut-mapped by reducing chroma rather than clipping.