CSS Variable

Custom properties defined in CSS that can store values to be reused throughout a document, also known as CSS Custom Properties.

Overview

CSS variables (custom properties) allow you to define reusable values in your CSS. They start with two dashes (--) and are accessed using the var() function. They cascade and can be changed at runtime, making them perfect for theming and dynamic styling.

Example

css
:root {
  --primary-color: #3490dc;
  --spacing-unit: 8px;
  --font-stack: -apple-system, sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  font-family: var(--font-stack);
}

/* Override in dark mode */
.dark-mode {
  --primary-color: #60a5fa;
}

Key Points

  • Defined with double dashes (--variable-name)
  • Accessed with var() function
  • Cascade and inherit like regular CSS properties
  • Can be changed with JavaScript
  • Perfect for theming and design systems

Learn More