Using Custom CSS

What the Custom CSS section does

The Custom CSS panel lets you write your own CSS rules to change how your resume looks in the live preview (and exports).

• Live updates: your changes are applied immediately as you type.
• Auto-save: there is no “Save” button—your CSS is saved automatically when it changes.
• Scoped styling (mostly): to avoid affecting the rest of the app, your CSS is usually scoped to the resume preview.

Where to find it

In the resume builder, open the right sidebar and select Custom CSS (the CSS section).

Enable / Disable

• Turn on the Enable switch to apply your CSS.
• Turning it off keeps your CSS saved, but stops applying it.

How scoping works (important)

Your CSS is injected into the preview and most top-level selectors are automatically prefixed with:

• .resume-preview-container

That means:

• Writing .page { ... } effectively becomes .resume-preview-container .page { ... }
• Writing h2 { ... } becomes .resume-preview-container h2 { ... }
• Writing body { ... } becomes .resume-preview-container body { ... } (which usually matches nothing, because body is not inside the preview container)

Scoping limitation: @media / @supports blocks

Rules that start with at-rules (like @media print { ... }) are not automatically scoped. If you want to keep those rules limited to the resume preview, you should manually prefix selectors inside at-rules with .resume-preview-container.

Example:

/* Normal rules: rely on auto-scoping */
.page a {
  text-decoration: none;
}

/* At-rules: manually scope selectors */
@media print {
  .resume-preview-container .page a {
    text-decoration: none;
  }
}

Formatting tip (to avoid scoping edge-cases)

Keep each rule's selector on one line, for example:

.page-section-experience .section-item-title {
  font-weight: 700;
}

Avoid splitting a selector across multiple lines unless you've confirmed it behaves as expected.

Finding the right selectors

Use autocomplete in the editor

In the Custom CSS editor, type a . (dot). You'll get suggestions for commonly-used class selectors, including:

• Page-level: .page, .page-content, .page-header, .page-basics, .page-main, .page-sidebar, .page-picture
• Section-level: .page-section, .section-content
• Section types: .page-section-experience, .page-section-education, .page-section-projects, etc.
• Generic item building blocks: .section-item, .section-item-header, .section-item-title, .section-item-description, .section-item-metadata, .section-item-website, etc.
• Per-section item selectors: .experience-item, .skills-item, .profiles-item, etc.
• Template wrapper: .template-azurill, .template-onyx, .template-gengar, etc.

Stable “starter selectors”

If you're not sure where to start, these are usually safe:

• .page (the resume page container)
• .page-section (each resume section)
• .section-item (each item inside a section)
• .page-picture (profile picture container)

Target a specific template (optional)

To apply styles only on one template, prefix with the template wrapper:

.template-azurill .page-header {
  gap: 12pt;
}

Target a specific page (optional)

Each page has a class like .page-0, .page-1, etc.

.page-0 .page-header {
  margin-bottom: 6pt;
}

Target a custom section (optional)

Custom sections include a dynamic class: .page-section-<sectionId>.

.page-section-custom {
  border-top: 1pt solid color-mix(in srgb, var(--page-text-color) 15%, transparent);
  padding-top: 6pt;
}

If you need the exact <sectionId>, use your browser devtools on the resume preview to inspect the section element.

Useful built-in CSS variables (you can override them)

The preview sets a number of CSS variables you can reuse or override:

• --page-width, --page-height
• --page-sidebar-width
• --page-text-color, --page-primary-color, --page-background-color
• --page-body-font-family, --page-body-font-size, --page-body-line-height, --page-body-font-weight, --page-body-font-weight-bold
• --page-heading-font-family, --page-heading-font-size, --page-heading-line-height, --page-heading-font-weight, --page-heading-font-weight-bold
• --page-margin-x, --page-margin-y
• --page-gap-x, --page-gap-y

Example (tighten spacing without changing your layout settings):

.page {
  --page-margin-x: 10pt;
  --page-margin-y: 10pt;
  --page-gap-y: 6pt;
}

Common examples (copy/paste)

1) Make section headings bolder and more compact

.page-section > h6 {
  margin-bottom: 2pt;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

2) Add subtle dividers between sections

.page-section {
  padding-bottom: 8pt;
  border-bottom: 1pt solid color-mix(in srgb, var(--page-text-color) 12%, transparent);
}

.page-section:last-child {
  border-bottom: none;
}

3) Reduce the size of metadata (dates/locations)

.section-item-metadata {
  font-size: calc(var(--page-body-font-size) * 0.9pt);
  opacity: 0.75;
}

4) Improve readability of rich-text descriptions (bullets, spacing)

.section-item-description {
  opacity: 0.95;
}

.section-item-description ul {
  margin-left: 12pt;
  padding-left: 0;
}

.section-item-description li {
  margin: 2pt 0;
}

5) Style links like a “chip” (useful for project links)

.section-item-website a {
  display: inline-block;
  padding: 3pt 9pt;
  border-radius: 999pt;
  border: 2pt solid color-mix(in srgb, var(--page-primary-color) 45%, transparent);
  text-decoration: none;
}

6) Hide the profile picture (CSS-only)

.page-picture {
  display: none;
}

7) Make the header more compact

.page-header {
  gap: 6pt;
  padding-bottom: 6pt;
}

.basics-headline {
  opacity: 0.8;
}

8) Make skills look denser (better use of space)

.skills-item-name {
  font-weight: 700;
}

.skills-item-proficiency {
  margin-top: 1pt;
}

.skills-item-keywords {
  display: block;
  opacity: 0.85;
}

9) Highlight a specific section (example: Profiles)

.page-section-profiles {
  background: color-mix(in srgb, var(--page-primary-color) 10%, transparent);
  border-radius: 8pt;
  padding: 8pt 12pt;
}

Troubleshooting

My CSS doesn't do anything

• Make sure Enable is turned on.
• Prefer targeting .page, .page-section, and .section-item instead of body.
• Use your browser devtools to inspect the preview and confirm the element/class names.

My @media rules affect the whole app / don't apply

At-rules aren't auto-scoped. Prefix selectors inside them with .resume-preview-container as shown above.