CSS Custom Properties (Variables): Complete Guide
Learn CSS custom properties: syntax, inheritance, responsive design, dark mode, theming, and JavaScript interaction.
Basic Usage
:root {\n --primary: #7c6cf7;\n --bg: #ffffff;\n --text: #1a1a2e;\n}\n\n[data-theme='dark'] {\n --bg: #0f0f23;\n --text: #e4e4f0;\n}\n\n.button {\n background: var(--primary);\n color: var(--text);\n}Pick colors with our Color Picker.
Try It Free
Use our free online tool — 100% client-side, no data leaves your browser.
Open Color Picker