Custom CSS
Full control over every pixel
For brands that need pixel-perfect customization, our Custom CSS feature gives you complete control over quiz styling.
/* Custom Quiz Styles */
.octane-quiz {
--primary: #FF6B5B;
--radius: 16px;
font-family: 'Inter';
}
.quiz-question {
background: linear-gradient(
135deg,
#f8f4ef,
#ebe5dc
);
border-radius: var(--radius);
}
.quiz-answer:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px
rgba(0,0,0,0.1);
}Developer-friendly customization
Everything you need to create completely custom quiz experiences.
🎨
CSS Variables
Use CSS custom properties for easy theming and consistent styling across your quiz.
🧩
BEM Classes
Well-structured class names following BEM methodology for easy targeting.
📱
Responsive
Media query support for different screen sizes. Mobile-first approach.
🎬
Animations
Add custom animations and transitions. Keyframes fully supported.
🔧
Dev Tools
Inspect element works perfectly. Debug styles in real-time.
📚
Documentation
Complete CSS class reference with examples for every element.
Use Cases
When to use Custom CSS
Exact brand guideline matching
Complex layout requirements
Custom animations and micro-interactions
Integration with existing design systems
A/B testing different visual styles
Pro Tip
Start with our visual designer for the basics, then add Custom CSS for fine-tuning. You get the best of both worlds.
Learn about the Quiz Designer →