CSS Custom Properties

CSS Variables

CSS custom properties store reusable values. Define with --name: value and read with var(--name). Define globals on :root.

Example

:root { --primary: #0d6efd; --space: 1rem; --radius: 8px; }
.btn { background: var(--primary); padding: var(--space); border-radius: var(--radius); }

CSS

Full Editor

Pro Tip

Define global variables on :root so they cascade to every element.