Custom CSS

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 supports LESS, and plain CSS works as well. Styles are previewed as you type. When saved, they are automatically scoped within a .reveal {} selector to prevent conflicts with the surrounding page.

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.

Slide classes

Use the special //= class-name syntax to make custom class names available in the presentation editor. This example adds a class that blurs a slide:

//= blurry-slide
.blurry-slide { filter: blur(5px); }

Example selectors

These selectors target common presentation elements:

// Apply a background color to all slides
.slide-background {
    background-color: indigo;
}

// 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("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.woff") format("woff"),
       url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.ttf") 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: