This page documents the core CSS architecture of reveal.js, including structural layers, component organization, and the custom properties system. For information about specific transition implementations, see Transitions and Effects. For theme creation, see Creating Custom Themes. For print-specific styles, see Print and PDF Export.
Reveal.js uses a modular SCSS architecture compiled to CSS for styling presentations. The CSS system provides:
The primary source is css/reveal.scss which compiles to dist/reveal.css The build process is covered in Build System.
The CSS architecture is organized into distinct layers that correspond to the DOM hierarchy and visual stacking order.
Sources: css/reveal.scss16-56 css/reveal.scss635-669 css/reveal.scss1129-1298
The viewport provides full-page layout and defines core CSS custom properties:
| CSS Class | Purpose | Key Properties |
|---|---|---|
html.reveal-full-page | Full viewport coverage | height: 100dvh, overflow: hidden |
.reveal-viewport | Main container | Defines CSS variables, handles fullscreen |
.reveal | Presentation root | position: relative, overflow: hidden |
.slides | Slide container | position: absolute, perspective: 600px |
The viewport uses modern viewport units with fallbacks:
Sources: css/reveal.scss16-56 css/reveal.scss635-651
Reveal.js uses CSS custom properties (CSS variables) for dynamic theming and configuration. These properties are defined at the viewport level and can be overridden by themes or JavaScript.
Primary Custom Properties:
| Property | Default | Usage |
|---|---|---|
--r-controls-spacing | 12px | Positioning for navigation arrows |
--r-overlay-header-height | 40px (desktop), 26px (mobile) | Overlay header size |
--r-overlay-margin | 0px | Overlay inset from viewport |
--r-overlay-padding | 6px | Internal padding for overlays |
--r-overlay-gap | 5px | Gap between overlay elements |
--r-scrollbar-width | 7px | Scroll view scrollbar width |
--vh | Dynamic | Viewport height fallback |
Responsive Adjustments:
Sources: css/reveal.scss25-46 css/reveal.scss2007-2015
Themes define additional custom properties that are consumed throughout the CSS:
--r-link-color - Used for link colors and overview outline--r-overlay-element-bg-color - Background for scroll view scrollbar elements--r-overlay-element-fg-color - Foreground color for scrollbar bordersThese properties are set dynamically based on background contrast detection:
Sources: css/reveal.scss2117-2126
Fragments are elements that reveal step-by-step within a slide. The fragment system uses visibility, opacity, and transform properties to create animations.
The CSS defines multiple fragment animation types through class combinations:
| Fragment Class | Initial State | Visible State |
|---|---|---|
.fragment (default) | opacity: 0; visibility: hidden | opacity: 1; visibility: inherit |
.fragment.grow | opacity: 1 | transform: scale(1.3) |
.fragment.shrink | opacity: 1 | transform: scale(0.7) |
.fragment.zoom-in | transform: scale(0.1) | transform: none |
.fragment.fade-out | opacity: 1 | opacity: 0; visibility: hidden |
.fragment.fade-up | transform: translate(0, 40px) | transform: translate(0, 0) |
.fragment.fade-down | transform: translate(0, -40px) | transform: translate(0, 0) |
.fragment.fade-right | transform: translate(-40px, 0) | transform: translate(0, 0) |
.fragment.fade-left | transform: translate(40px, 0) | transform: translate(0, 0) |
Current Fragment Variants:
Some fragments only show when they are the current active fragment (.current-fragment):
.fade-in-then-out / .current-visible - Only visible as current.fade-in-then-semi-out - Fades to 50% opacity after becoming visibleHighlight Variants:
Sources: css/reveal.scss63-223
The controls provide navigation arrows positioned at the viewport edges. The system uses pseudo-elements to draw arrow shapes.
The arrow shapes are constructed using two rotated pseudo-elements:
The @mixin controlsArrowTransform() css/reveal.scss275-283 applies rotation to create the arrow angle.
Controls have two layout modes:
data-controls-layout="edges") - Controls on all four edgesEdge Layout:
Sources: css/reveal.scss267-567
Slide transitions use CSS transforms applied based on slide state classes (.past, .present, .future). The system provides mixins for defining transition behavior.
Each transition type is implemented using these mixins:
| Transition | Horizontal Past | Horizontal Future | Implementation |
|---|---|---|---|
slide | translate(-150%, 0) | translate(150%, 0) | css/reveal.scss805-818 |
convex / default | translate3d(-100%, 0, 0) rotateY(-90deg) | translate3d(100%, 0, 0) rotateY(90deg) | css/reveal.scss825-842 |
concave | translate3d(-100%, 0, 0) rotateY(90deg) | translate3d(100%, 0, 0) rotateY(-90deg) | css/reveal.scss848-863 |
zoom | scale(16); visibility: hidden | scale(0.2); visibility: hidden | css/reveal.scss870-886 |
fade | No transform, opacity-based | No transform, opacity-based | css/reveal.scss1045-1056 |
3D Transform Transitions:
For 3D transitions, the stack containers use transform-style: preserve-3d:
Sources: css/reveal.scss754-1066
Backgrounds are rendered in a separate .backgrounds container that sits behind the slides. Each slide can have its own background element.
Backgrounds have their own transition system, applied via data-background-transition attribute:
Video backgrounds use object-fit for sizing:
Sources: css/reveal.scss1129-1308
The overlay system provides modal dialogs for help, media previews, and other full-screen content. It uses modern flexbox layout and backdrop blur effects.
Preview Overlay (.r-overlay-preview) - For displaying images, videos, and iframes:
Supports data-preview-fit attribute with values: none, scale-down, contain, cover css/reveal.scss1588-1606
Help Overlay (.r-overlay-help) - For keyboard shortcuts:
The overlay includes a spinner for loading states:
Shown when .r-overlay-preview[data-state="loading"] css/reveal.scss1630-1633
Sources: css/reveal.scss1445-1673
The progress bar displays horizontal presentation progress at the bottom of the viewport.
The progress fill uses transform: scaleX() for smooth animation:
The JavaScript controller updates the transform: scaleX(percentage) value. The :after pseudo-element css/reveal.scss586-593 provides a larger hit area for mouse interaction.
Sources: css/reveal.scss574-603
Different view modes apply specific CSS classes and styles to restructure the presentation.
Overview mode (.reveal.overview) displays all slides in a grid layout:
Slides show outlines on hover, with the current slide highlighted:
Sources: css/reveal.scss1327-1392
Scroll view (.reveal-viewport.reveal-scroll) completely restructures the DOM for continuous scrolling:
Key characteristics:
display: none !important css/reveal.scss2017-2024display: block css/reveal.scss2037-2052.scroll-page with calculated height css/reveal.scss2054-2060--slide-width, --slide-height, --slide-scaleCustom Scrollbar:
Scroll view includes a custom scrollbar component:
Sources: css/reveal.scss1995-2223
Displays current slide position:
Sources: css/reveal.scss609-629
Input field for quick navigation:
Color adjusts based on background contrast via .has-dark-background / .has-light-background css/reveal.scss1915-1920
Sources: css/reveal.scss1894-1924
On-page notes are hidden by default:
The .speaker-notes interface can display notes alongside the presentation:
Shown when .reveal.show-notes is active css/reveal.scss1840-1847
Sources: css/reveal.scss1793-1887
Styles for syntax-highlighted code blocks:
Sources: css/reveal.scss1698-1741
The main SCSS file is css/reveal.scss which imports:
At the end, it imports print styles:
The layout module likely contains layout utilities (.r-stack, .r-hstack, etc.).
Variables: css/reveal.scss267-273
Mixins: css/reveal.scss275-283 css/reveal.scss758-798
Nesting: Used extensively for scoping selectors
Math Functions: math.div() for calculations css/reveal.scss332 css/reveal.scss1805
The SCSS is compiled to CSS using the Gulp build system (see Build System). The compilation pipeline:
Output files:
dist/theme/ directorySources: css/reveal.scss1-10 css/reveal.scss2230-2231
Reveal.js CSS includes several responsive breakpoints:
| Breakpoint | Target | Adjustments |
|---|---|---|
max-width: 500px | Mobile | Controls spacing reduced, scrollbar narrower |
max-width: 600px | Small mobile | Speaker notes font size reduced |
max-width: 1024px | Tablet | Overlay header height reduced, speaker notes repositioned |
min-width: 500px | Desktop | Controls edge layout enabled |
min-width: 1600px | Large desktop | Speaker notes font size increased |
Example:
Sources: css/reveal.scss42-46 css/reveal.scss520-567 css/reveal.scss1849-1887 css/reveal.scss2012-2015
Defined keyframe animations:
Used for control highlighting when navigation is available.
Overlay Animations:
Applied to overlay appearance css/reveal.scss1473 and content css/reveal.scss1541
Standard easing function used throughout:
cubic-bezier(0.260, 0.860, 0.440, 0.985)
Applied to:
Transition speed can be controlled via:
data-transition-speed="fast" - 400msdata-transition-speed="slow" - 1200msSources: css/reveal.scss249-265 css/reveal.scss1445-1453 css/reveal.scss690-704 css/reveal.scss1302-1307
Right-to-left language support via .reveal.rtl class:
Sources: css/reveal.scss1399-1422
The CSS uses a defined z-index hierarchy:
| Component | Z-Index | Purpose |
|---|---|---|
.slides | 1 | Base slide layer |
.backgrounds (individual) | 2 | Visible backgrounds |
.controls | 11 | Navigation arrows |
.progress | 10 | Progress bar |
.slide-number | 31 | Slide number display |
.jump-to-slide | 30 | Jump input |
.r-overlay | 99 | Modal overlays |
.pause-overlay | 100 | Pause screen |
Slides themselves:
.slides > section - z-index: 10.slides > section.present - z-index: 11Sources: css/reveal.scss285-292 css/reveal.scss574-581 css/reveal.scss609-614 css/reveal.scss1461-1468 css/reveal.scss1074-1083
Refresh this wiki