Custom CSS Reference

Use the Custom CSS field in the Styles panel to target semantic class hooks on every slide element. Your CSS applies in the editor preview and in PNG / PDF exports.

DOM Hierarchy

.slide
  .card
    .logo
    .slide-count
    .content.block
      .h1 / .h2 / .h3 / .h4 / .h5 / .h6
      .text
      .list > .list-item
      .image

Available Classes

Class	Description
`.slide`	The slide root container (1080×1080 or 1080×1350). Wraps everything.
`.card`	The template/card wrapper inside each slide. Controls background, padding, etc.
`.logo`	Wrapper around the brand logo image (top-right by default).
`.slide-count`	The slide counter text (e.g. "1 / 5") at the bottom of each slide.
`.content`	The content area that holds all editor blocks.
`.block`	The block container that applies fill/border styles from the theme.
`.h1 – .h6`	Heading elements at each level.
`.text`	Body/paragraph text elements.
`.list`	Ordered or unordered list container (<ol> or <ul>).
`.list-item`	Individual list items (<li>).
`.image`	<figure> wrapper around inline images.
`.button`	Button elements (used in CTA slides / theme preview).

Examples

Change heading color on all slides

.h1, .h2, .h3 {
  color: #E11D48;
}

Add a border to the card

.card {
  border: 2px solid #3B82F6;
  border-radius: 24px;
}

Style the slide counter

.slide-count {
  font-size: 24px;
  font-weight: 700;
  color: #8B5CF6;
}

Hide the logo on all slides

.logo {
  display: none;
}

Add a gradient background

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tips

Your CSS automatically overrides the built-in theme styles — no need for !important.
Custom CSS is applied inside each slide's DOM, so classes don't leak outside the slide.
Changes preview in real-time in the editor and are included in PNG/PDF exports.
Avoid using tag selectors (e.g. h1) — prefer the class hooks (e.g. .h1) for stability.