CSS Custom Properties (Variables)

Learn how to use and reuse CSS custom properties for dynamic styling

Introduction to CSS Custom Properties

CSS Custom Properties (also known as CSS Variables) allow you to store specific values to be reused throughout your document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

:root {
  --primary-color: #5e72e4;
  --secondary-color: #2dce89;
  --border-radius: 8px;
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

.alert {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
}
                    

This allows for more maintainable and flexible CSS, especially for properties that are repeated throughout your stylesheet.

Basic Usage

Here are some examples of basic custom properties defined in the :root scope and used throughout different elements:

Primary Color Box

Secondary Color Box

Accent Color Box

Dark Color Box

Light Color Box

:root {
  --primary-color: #5e72e4;
  --secondary-color: #2dce89;
  --accent-color: #11cdef;
  --dark-color: #344767;
  --light-color: #f8f9fa;
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s ease;
}

.demo-box {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.primary-box {
  background-color: var(--primary-color);
  color: white;
}

/* ... and so on for other color boxes */
                    

Theme Switching with Custom Properties

One of the most powerful uses of CSS Custom Properties is for theme switching. By changing a few variables, you can completely transform the look of your website:

Theme Example

This is a paragraph with the current theme applied. Notice how all colors change when you switch themes.

.theme-container {
  --theme-primary: #5e72e4;
  --theme-secondary: #2dce89;
  --theme-background: #ffffff;
  --theme-text: #344767;
  
  background-color: var(--theme-background);
  color: var(--theme-text);
}

.theme-container.dark-theme {
  --theme-primary: #8392f7;
  --theme-secondary: #4fd69c;
  --theme-background: #1a202c;
  --theme-text: #f8f9fa;
}

.theme-container.colorful-theme {
  --theme-primary: #ff6b6b;
  --theme-secondary: #feca57;
  --theme-background: #f9f9f9;
  --theme-text: #2d3436;
}

.theme-title {
  color: var(--theme-primary);
}

.theme-text {
  color: var(--theme-text);
}

.theme-accent {
  color: var(--theme-secondary);
}
                    

Responsive Design with Custom Properties

CSS Custom Properties can be redefined within media queries, making responsive design more maintainable:

This container changes its width, font size, and padding based on the viewport size. Resize your browser to see the effect.

.responsive-container {
  --container-width: 100%;
  --font-size-base: 16px;
  --padding-base: 1rem;
  
  width: var(--container-width);
  font-size: var(--font-size-base);
  padding: var(--padding-base);
}

@media (min-width: 768px) {
  .responsive-container {
    --container-width: 80%;
    --font-size-base: 18px;
    --padding-base: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .responsive-container {
    --container-width: 60%;
    --font-size-base: 20px;
    --padding-base: 2rem;
  }
}
                    

Calculated Values

You can use the calc() function with custom properties to create dynamic calculations:

This element has padding and margin that are calculated based on a base size and multiplier.

.calculated-demo {
  --base-size: 16px;
  --spacing: 8px;
  --multiplier: 2;
  
  font-size: var(--base-size);
  padding: calc(var(--spacing) * var(--multiplier));
  margin-bottom: calc(var(--spacing) * var(--multiplier));
  border: calc(var(--spacing) / 2) solid var(--primary-color);
}
                    

Fallback Values

You can provide fallback values for custom properties that might not be defined:

This element uses fallback values for undefined custom properties.

.fallback-demo {
  background-color: var(--undefined-color, #f8f9fa);
  color: var(--undefined-text, #344767);
  border: 1px solid var(--undefined-border, #dee2e6);
}
                    

JavaScript Interaction

CSS Custom Properties can be manipulated with JavaScript, making them perfect for dynamic styling:

Change Color:

Change Padding (0.5rem - 3rem):

This element's style can be changed using the controls above.

.js-demo {
  --js-color: #5e72e4;
  --js-size: 1rem;
  
  background-color: var(--js-color);
  padding: var(--js-size);
}

// JavaScript
function updateColor(color) {
  document.getElementById('jsDemo').style.setProperty('--js-color', color);
}

function updateSize(size) {
  document.getElementById('jsDemo').style.setProperty('--js-size', size + 'rem');
}
                    