Home CSS Reference CSS Variables (custom properties)

CSS Variables (custom properties)

property CSS3

Custom properties that store reusable values. Defined with -- prefix and used with var().

Syntax

--variable-name: value; var(--variable-name)

Example

css

:root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --danger: #e74c3c;
    --text: #333;
    --spacing-md: 16px;
    --border-radius: 8px;
}

.btn-primary {
    background: var(--primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

/* Override in context */
.dark-theme {
    --primary: #5dade2;
    --text: #eee;
}

opacity

border