Skip to main content

Style a playlist with multi-color gradients

Updated Aug 5, 2026

Style a playlist with multi-color gradients

Overview​

You can style your playlists, demo centers, and deal rooms with a multi-color gradient on top of the existing flat-color branding. Gradients apply to three surfaces:

  • Background color — the surface the playlist sits on
  • Player Background Color — the surface behind an open demo in a Choose-Your-Own-Adventure (CYOA) playlist
  • Accent color — buttons and other accented UI

Font color and link color remain solid colors — they are typography and need to stay crisply legible.

Turn a Color Into a Gradient​

  1. Open the playlist, demo center, or deal room in the editor.
  2. In the top bar, click the Styling options (palette) icon.
  3. Expand Background color, Player Background Color, or Accent color.
  4. In the fill picker, switch Fill mode from Solid to Gradient.
  5. Configure the gradient — add color stops, drag them to adjust position, and choose the direction.
  6. The playlist updates live.

Only one field is expanded at a time, so the panel never overflows and it's always obvious which surface you're editing.

Return to a Solid Color​

Flip Fill mode back to Solid. Walnut remembers the gradient you were editing for the rest of the session, so switching to Solid and back doesn't lose your work — you can compare a solid brand color and a gradient without rebuilding the stops.

Use Reset to company default on the field to snap back to your workspace default entirely.

When to Use It​

  • Product launches / campaign playlists — a bold gradient makes a campaign feel distinct from your evergreen library.
  • Themed deal rooms — signal a particular customer, industry, or vertical.
  • Brand systems that already use gradients — match your marketing site or product hero.

Keep contrast in mind: playlist and demo-center content sits on top of the background, so pick stops that keep tiles and text readable.

FAQs​

Do gradients apply to individual demos inside the playlist?​

No — gradient branding applies to the playlist / demo center / deal room chrome (background, player background, buttons). Demos inside carry their own template styling.

Can I keep just one surface as a gradient and the rest flat?​

Yes. Each field has its own Fill mode, so you can mix and match (e.g. gradient background + solid accent).

Does gradient branding work in dark mode?​

Yes. The playlist chrome respects viewer theme; pick stops that read well against both light and dark demo content if your audience uses both.

What if I switch to Solid — do I lose my gradient stops?​

Within the same editing session, Walnut remembers the last gradient on each field so you can flip back and forth. Once you leave the editor and save with Solid, only the solid value is persisted.

Was this helpful?