---
title: "Gradients"
description: "Color the bars with a built-in preset or your own CSS-color stops."
canonical_url: "https://www.fftvisualizer.com/guide/gradients"
---
# Gradients

> Color the bars with a built-in preset or your own CSS-color stops.

Bar colors are rasterized into a 256×1 lookup texture, so any CSS color and native gradient
interpolation work. Pass a preset name or an array of custom stops to the `gradient` option.

## Presets

<code-group>

```ts [Core]
new FFTVisualizer(canvas, { mode: 'local', gradient: 'sunset' })
```

```vue [Vue]
<FFTVisualizer mode="local" gradient="sunset" />
```

```tsx [React]
<FFTVisualizer mode="local" gradient="sunset" />
```

</code-group>

Built-in presets (exported as `gradientPresets` / `gradientNames`):

`classic` · `rainbow` · `blue` · `prism` · `orangered` · `steelblue` · `sunset` ·
`aurora` · `dusk` · `mono`

## Custom stops

Any CSS color format works — hex, `rgb()`, `hsl()`, named colors:

<code-group>

```ts [Core]
new FFTVisualizer(canvas, {
  mode: 'local',
  gradient: [
    { stop: 0, color: '#001233' },
    { stop: 0.5, color: 'rgb(15, 155, 142)' },
    { stop: 1, color: 'hsl(280, 95%, 75%)' }
  ]
})
```

```vue [Vue]
<FFTVisualizer
  mode="local"
  :gradient="[
    { stop: 0, color: '#001233' },
    { stop: 0.5, color: 'rgb(15, 155, 142)' },
    { stop: 1, color: 'hsl(280, 95%, 75%)' }
  ]"
/>
```

```tsx [React]
<FFTVisualizer
  mode="local"
  gradient={[
    { stop: 0, color: '#001233' },
    { stop: 0.5, color: 'rgb(15, 155, 142)' },
    { stop: 1, color: 'hsl(280, 95%, 75%)' }
  ]}
/>
```

</code-group>

## Direction & color mode

- `gradientDirection: 'horizontal'` runs the gradient across the frequency axis instead of the level axis.
- `colorMode: 'bar-level'` colors each whole bar by its current level (a VU-meter feel) rather than by position along the gradient axis.

## Helpers

For building settings UIs or your own rendering, these are exported from every package:

<code-group>

```ts [Core]
import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  GRADIENT_LUT_SIZE,
  type GradientStop,
  type GradientName,
  type GradientInput
} from '@fft-visualizer/core'
```

```ts [Vue]
import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  type GradientStop,
  type GradientName,
  type GradientInput
} from '@fft-visualizer/vue'
```

```ts [React]
import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  type GradientStop,
  type GradientName,
  type GradientInput
} from '@fft-visualizer/react'
```

</code-group>

The wrappers re-export these from the core for convenience. The `GRADIENT_LUT_SIZE`
constant is **core-only** — import it from `@fft-visualizer/core` if you need it.


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.