Skip to main content

Style a playlist with multi-color gradients

Updated Sep 24, 2026

Style a playlist with multi-color gradients

Overview​

You can style your Walnut surfaces with a multi-color gradient on top of the existing flat-color branding. Gradients apply across the app:

Playlists, demos, and deal rooms

  • 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

Demos and demo templates (guide branding)

  • Guide card background — the panel that holds each guide step
  • Guide accent color — the guide card's buttons and other accented UI

Captured elements inside a demo

  • Element background — any element you double-click in the Editor can take a gradient fill

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

The Fill Picker​

Every brandable color surface in Walnut now uses the same fill picker. Open a color field and you'll see a Solid / Gradient switch at the top of the panel.

  • Solid — a single color, entered as HEX / RGBA / HSLA.
  • Gradient — a linear gradient with 2–5 color stops.

Below the switch, the panel exposes a unified swatch library shared across the whole app:

  • Your brand — gradients derived from your workspace brand colors.
  • Custom — your saved swatches. Press + to open the gradient editor; press Save to add the current gradient to Custom. Custom swatches can be removed from the tile.
  • Library — a curated set of preset gradients.
  • Recent — the last gradients you picked, so you can jump back to one without re-authoring it.

The same picker and swatches appear whether you're editing a playlist, a demo center, a deal room, guide styling, or a captured element — a gradient saved on one surface is available on every other.

Turn a Playlist, Demo Center, or Deal Room 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. Switch Fill mode from Solid to Gradient.
  5. Pick a swatch, or press + in Custom to author your own — 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.

Brand Guides with a Gradient​

Guide styling is set at two levels: the workspace default (Brand Style in company settings) and per-storyline overrides (Guides in the editor's right sidebar). Both levels expose the same two fill fields:

  • Guide card background
  • Guide accent color (buttons and other accents on the guide card)

To apply a gradient:

  1. Open Brand Style (workspace defaults) or the storyline's Guides settings.
  2. Open the Background color or Accent color field.
  3. Switch Fill mode to Gradient and pick a swatch — or author a custom gradient with +.
  4. Save. Guide styling applies to every guide step in scope; storyline-level values override the workspace default.

A storyline that overrides a color inherits the gradient that goes with it — the pair cascades as one unit, so you never end up with the workspace's gradient wrapped around a storyline's flat color.

Fill a Captured Element with a Gradient​

Any captured element that supports Background Color can now take a gradient too.

  1. Double-click the element in the editor to open its element toolbar.
  2. Click Background Color to open the fill picker.
  3. Switch Fill mode to Gradient and pick a swatch, or author your own via +.
  4. The element repaints live.

The flat Background Color stays alongside as a fallback; wherever the gradient can't render, the flat color takes its place.

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.

On a captured element, setting Background Color on its own also clears the gradient — that's how you take an element back to a flat fill.

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?​

Yes. In addition to the playlist / demo center / deal room chrome, gradients apply to demo guide styling (both the workspace default and per-storyline overrides) and to individual captured elements' backgrounds. A demo can carry a gradient on its guide cards, on its buttons and accents, and on any element you customize in the editor.

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).

Can I reuse the same gradient on more than one surface?​

Yes. Save it to Custom on any fill picker and it's available in every fill picker across the app — playlist chrome, guide styling, and element backgrounds share one swatch library.

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?