Custom CSS (Pro)

The CSS editor lets you freely author custom styles for your presentation. It's available as an option inside of the Style panel of the editor.

The editor uses LESS, though plain CSS works as well. We apply the styles in real-time as you type so there's no need to leave the editor or even press a refresh button to see what you're getting. Note that when your styles are saved they will be automatically wrapped in a ".reveal {}" selector to avoid conflicts with other page styles. 

Custom fonts
You can load custom fonts from Typekit and Google fonts and apply them to your content using CSS. Find out more.

Developer mode
If you turn on the developer mode you'll be able to easily add custom classes to any focused element. This is a great way to apply your CSS to specific elements.

Below are some sample selectors:
// Presentation background color
& {
    background: #a83239;

// Control arrow color
.controls button {
    color: #ff0000;

// Fill color for the presentation progress bar
.progress span {
    background: #ff0000;
} // Body text color
.slides {
    color: #009999;
} // Link color .slides a { color: red; } // Turn text white if the slide has a dark background .has-dark-background { color: #fff; } // Larger slide numbers (if slide numbers are enabled for the deck)
.slide-number {
    font-size: 20px;
} // Add a blue border to all slides (each slide is a <section>) .slides section { outline: 1px solid blue; } // Add a red border to all vertical stacks of slides .slides section.stack { outline: 1px solid red; }
// Include a custom font
@font-face {
  font-family: "Cabin Sketch";
  src: url("") format("woff"),
       url("") format("truetype");
.slides h1, .slides h2, .slides h3 {
    font-family: "Cabin Sketch";

Here's where you can access the CSS editor from inside of the Style panel:

A screenshot of the editor:

Feedback and Knowledge Base