This article covers Themes and advanced styling for for Flows 2.0, Embeds and Banners. For our legacy Themes and Styling, see Styling Flows and Themes

Themes let you define your brand's visual identity once and apply it consistently across your Flows 2.0 and Embeds. Instead of styling each block individually, set your colors, fonts, and spacing in a Theme and every Flow or Embed that uses it stays on-brand.

How Themes work

When you create a Flow 2.0 or Embed or edit its settings, you select a Theme. That Theme sets default styles for text, buttons, images, and the step background.

In Experience Settings, click Edit theme to open the theme editor. Each Theme includes:

• Name and an optional dark mode variant
• Colors — foreground, background, and primary color
• Interface — font family, font size, corner radius, and spacing

The preview on the right shows how your heading levels, paragraph text, and buttons look with the current settings.

Use Theme variants

Themes support multiple variants for each block type. For example, your Theme might define a "Primary" button (solid fill) and a "Secondary" button (outline style) with different colors and sizing.

To apply a variant:

1. Select a block in the Builder (text, button, or image).
2. Open the block's settings panel.
3. Choose the variant you want from the available options.

The block updates to match that variant's styles.

Override Theme styles

If you customize a block beyond its Theme variant, the Builder shows an override indicator so you know the block has diverged from the Theme.

When you see an override, you have four options:

• Reset individual properties — Click the reset icon next to any overridden property to revert just that value.
• Reset instance — Reset all overridden properties on the block back to the Theme variant.
• Save as new — Save your customizations as a new variant in the Theme.
• Update original — Apply your changes back to the existing variant. This updates every block using that variant.

Advanced styling with CSS

The Advanced tab is also available in Banners, which don't support Themes but do support per-block and step-level CSS customization.

For fine-grained control, the Builder exposes an Advanced tab with CSS properties at two levels:

• Step-level — Controls the step container itself: background color, dimensions, padding, margins, border radius, and box shadow. Select the step (not a block) and open Step Settings > Advanced.
• Block-level — Controls individual blocks within the step. Select any text, button, or image block and open its settings panel > Advanced to style that specific element.

Step styles affect the overall frame your content sits in. Block styles affect the content inside it. Both use the same CSS editor.

Edit existing styles

Each property displays its current value. Click any value to edit it directly. To revert a property to its default, click the revert icon next to it.

Add new styles

Click + Add at the bottom of the styles list to add a CSS property that isn't already listed.

Paste styles in bulk

Click the paste area at the top of the Advanced panel to paste multiple CSS declarations at once. This is useful when copying styles from another source.

Not all CSS properties are supported. After pasting, any unsupported properties are listed so you know what couldn't be applied.

Share styles across blocks

Click Copy CSS at the bottom of the Advanced panel to copy all styles for the current block. You can then paste them into another block's Advanced tab or share them with your design team.

Styling recipes

These recipes show what's possible with the Advanced tab. Copy the CSS into any block to try them out — then adjust the values to match your brand. 

Box shadow

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

Enlarge on hover

transition: transform 0.3s ease-in-out;
:hover {
  transform: scale(1.2);
}

Sunburst glow on hover

:hover {
  box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0,0,0,0);
}

Tooltip on hover

position: relative;

::before {
  content: "Tooltip text";
  min-width: 80px;
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) translateY(-100%);
  background: rgba(0,0,0,0.7);
  text-align: center;
  color: #fff;
  padding: 4px 2px;
  font-size: 12px;
  border-radius: 4px;
  display: none;
}
::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: rgba(0,0,0,0.7) transparent transparent transparent;
  border-style: solid;
  display: none;
}

:hover::before { display: block; }
:hover::after { display: block; }

Gradient button with hover shift

border-radius: 50px;
background-size: 200% auto;
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
transition: 0.5s;
:hover {
  background-position: right center;
}

Rotate an image

transform: rotate(-15deg) translate(-30px, 20px);

Hand-drawn border

border-color: #41403E;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border-style: solid;
border-width: 2px;
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);