Styling

CSS custom properties

Property	Default	Description
--audio-visualizer-color	currentColor	Bar colour. Takes priority over the color attribute. Falls back to the inherited CSS color property when unset.
--audio-visualizer-transition	100ms	Duration of bar height transitions. Lower = snappier; higher = smoother.

Three ways to set colour

1. CSS custom property (recommended)

Keeps colour in CSS — works with design tokens and theme switching.

/* Stylesheet */
audio-visualizer {
  --audio-visualizer-color: #6366f1;
}

/* Or inline */
<audio-visualizer style="--audio-visualizer-color: #6366f1"></audio-visualizer>

2. CSS inheritance

The bars use background-color: currentColor internally. Set color on any ancestor and the bars inherit it — no attribute or custom property needed.

<div style="color: #ec4899">
  <audio-visualizer></audio-visualizer>
</div>

Tip

Inheritance is great for buttons or toolbars where the surrounding text color already matches your brand. Zero extra code.

3. HTML color attribute

A convenience attribute for quick, one-off colour overrides. The --audio-visualizer-color custom property takes priority when both are set.

<audio-visualizer color="#10b981"></audio-visualizer>

Transition speed

<!-- Snappy — suits fast speech or music -->
<audio-visualizer
  style="--audio-visualizer-transition: 40ms"
></audio-visualizer>

<!-- Default -->
<audio-visualizer
  style="--audio-visualizer-transition: 100ms"
></audio-visualizer>

<!-- Smooth — suits background ambience -->
<audio-visualizer
  style="--audio-visualizer-transition: 250ms"
></audio-visualizer>

Dark / light theme

The element inherits currentColor by default, which means it automatically adapts to your site’s text colour:

/* Light theme */
body {
  color: #111;
}

/* Dark theme */
[data-theme="dark"] {
  color: #f5f5f5;
}

/* audio-visualizer bars follow automatically — no extra code */

Size reference

size	Container height	Bar width	Gap	Default bars
icon	24 px	4 px	2 px	3
sm	56 px	8 px	4 px	3
md	112 px	16 px	8 px	5
lg	224 px	32 px	16 px	5
xl	448 px	64 px	32 px	5