CSS Editor

Comfort+ Available on Comfort and Premium plans.

What is the CSS Editor?#

The CSS Editor lets you write arbitrary CSS that is injected directly into your public quiz page. Change colours, fonts, padding, border-radius, animations — anything possible in CSS.

Unlike other quiz builders that require !important on every rule, Qwizoo is built around CSS custom properties (variables). Change --qz-primary once and every button, selection highlight and progress bar updates automatically.

How to Open the CSS Editor#

1. 1Open your quiz in the builder.
2. 2Click the Design tab in the right-hand panel.
3. 3Switch to the CSS sub-tab (fourth tab, after Layout).
4. 4Write or paste your CSS into the editor.
5. 5Changes are saved automatically — open your quiz in a new tab to preview.

CSS Variables#

These variables are set on the quiz root element and cascade to all child components. Override them in :root or directly on [data-quiz="container"].

Targeting Elements — data-quiz-* Selectors#

Every key element in the quiz has a stable data-quiz or data-quiz-btn attribute. Attribute selectors have higher CSS specificity than class selectors, so they override Tailwind utility classes without !important.

Layout & Navigation

Progress bar

Welcome step

Question & Choices

Lead form

Result step

Formula calculator

Thank You & Share

Video & Calendar

Code Examples#

Change brand colour

:root {
  --qz-primary: #7B61FF;
}

Dark mode

:root {
  --qz-bg: #1A1A2E;
  --qz-card-bg: #16213E;
  --qz-text: #F9FAFB;
  --qz-shadow: 0 24px 60px rgba(0,0,0,0.40);
}

Pill-shaped buttons

:root {
  --qz-btn-radius: 9999px;
}

Gradient Next button

[data-quiz-btn="next"] {
  background: linear-gradient(135deg, #FF7A00, #FF4500) !important;
  letter-spacing: 0.04em;
}

Custom card

[data-quiz="card"] {
  border-radius: 24px;
  border: 2px solid var(--qz-primary);
  padding: 40px;
}

Custom Google Font

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
  --qz-font: Montserrat, sans-serif;
}

Larger question text

:root {
  --qz-q-size: 26px;
}

Style text inputs

[data-quiz="text-input"] {
  border-radius: 8px;
  border: 2px solid var(--qz-primary);
  font-size: 16px;
}

Style step titles

[data-quiz="title"] {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
[data-quiz="result-value"] {
  font-size: 3rem;
}

Built-in Snippets#

Click any snippet in the right-hand panel to insert it. Snippets are appended to existing CSS — they never overwrite what you have already written.

• Dark mode — dark background and card with light text
• Purple accent — switches the primary colour to purple
• No card shadow — removes the card drop shadow
• Larger question text — increases question font size to 26px
• Google Font — Montserrat — imports and applies Montserrat
• Gradient Next button — orange-to-red gradient on the continue button
• Custom card — rounded card with a coloured border and extra padding

Tips & Limitations#

• Copy selectors from the panel — the Element Selectors panel inside the editor lists all 16 selectors with a one-click copy button, so you never have to type them manually.
• CSS variables override inline styles — even though colours are set with inline styles internally, they use var(--qz-primary), so changing the variable overrides them everywhere.
• Attribute selectors beat Tailwind classes — [data-quiz="card"] has specificity (0,1,0,0) vs a Tailwind class (0,0,1,0), so spacing and size overrides just work.
• Choice selection tint uses hex-alpha (e.g. #FF7A0012) — use !important if you need to change it.
• 50 000 character limit — more than enough for any real-world use.
• @import for Google Fonts works — the style tag is injected into the page head, so @font-face is also fully supported.