Gradients

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.

Presets

<FFTVisualizer mode="local" gradient="sunset" />

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:

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

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:

import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  GRADIENT_LUT_SIZE,
  type GradientStop,
  type GradientName,
  type GradientInput
} from 'vue-fft-visualizer'