CSS Variables

:root {
  --color-brand: #E50914;
}

.btn {
  background-color: var(--color-brand);
}

Let me ask you something.

Look at our Netflix clone CSS. How many times have we written #E50914? The red color for the logo, the buttons, the badges, the borders, the box shadows. It is scattered everywhere throughout the file.

Now imagine the client comes back and says actually we want to change the brand color to a slightly different red. Or maybe to orange. You would have to find every single place you used that color and change it one by one. Miss one and the design is inconsistent.

CSS Variables solve this completely. You define your values once at the top and use them everywhere. Change the value in one place and it updates across the entire page instantly.

This is how real professional projects are built.

What is a CSS Variable

A CSS Variable is a custom property you define yourself. You give it a name and a value. Then you reference that name anywhere in your CSS instead of writing the actual value.

You define variables inside a :root selector. :root refers to the very top of the document — the html element. Putting variables there makes them available everywhere on the page.

:root {
  --variable-name: value;
}

Variable names always start with two dashes. That is how CSS knows it is a custom property and not a regular CSS property.

Then you use it with the var() function.

element {
  property: var(--variable-name);
}

Let us see it in action.

Both the logo and the button use the same --brand-color variable. Now if you change #E50914 to any other color in the :root both update instantly.

Here is what is happening.

:root — the top level selector. Variables defined here are available to every element on the page.

--brand-color: #E50914 — defines a variable called --brand-color with the value #E50914. The two dashes at the start are required.

var(--brand-color) — retrieves the value of the variable. Wherever you write this CSS inserts #E50914 in its place.

Building a Design System

The real power of CSS Variables is when you define all your design decisions in one place. Colors, font sizes, spacing, border radius — everything your design uses consistently.

This is called a design system or design tokens. Every professional project has one.

Now look at how clean and readable that CSS is. Every value has a name that describes what it is. --color-brand is clearly the brand color. --space-xl is clearly the extra large spacing. --font-display is clearly the display font.

Here is what is happening.

All the variables are defined in :root — one place. Every color, every font, every spacing value, every shadow. The entire design system lives at the top of the file.

Every property references a variable — nothing is hardcoded anywhere else in the file. If you want to change the brand color you change it in one place and every button, every logo, every badge, every border that uses --color-brand updates instantly.

The names are descriptive — --color-brand not --red. --space-xl not --40px. This makes the CSS self documenting. Anyone reading it immediately understands what each value represents.

Updating Variables with JavaScript

CSS Variables are also accessible from JavaScript. This means you can change them dynamically — like switching between light and dark mode with one line of code.

// Switch to a different brand color
document.documentElement.style.setProperty('--color-brand', '#0066ff');

One line and every element using --color-brand instantly turns blue. This is exactly how dark mode toggles and theme switchers work on real websites.

We are not covering JavaScript in this course but it is worth knowing this connection exists. CSS Variables are not just a CSS feature — they are the bridge between CSS and JavaScript for dynamic theming.

Fallback Values

You can provide a fallback value inside var() in case the variable is not defined. The fallback goes as a second argument separated by a comma.

color: var(--color-brand, #E50914);

If --color-brand exists its value is used. If it does not exist for any reason the fallback #E50914 is used instead. This is useful for component libraries where a variable might or might not be defined depending on the context.

Building the Netflix Clone

Let us refactor the entire Netflix clone to use CSS Variables throughout. This is the final version of the clone — everything we have built over the last lessons brought together into a clean well structured stylesheet.

Here is what CSS Variables brought to the full clone.

One place to change everything — want to update the brand color, the spacing system, the border radius, the transition speed? Change it in :root and the entire page updates. No hunting through hundreds of lines.

Self documenting code — var(--color-brand) tells you exactly what that color represents. var(--transition-base) tells you this is the standard transition speed. No more guessing what #E50914 or 0.3s ease mean without context.

Consistent design — because every spacing value comes from the same set of variables the padding, gaps, and margins all have a consistent rhythm. Nothing is arbitrary.

--transition-fast and --transition-base — even transition durations are variables now. If you decide all transitions should be slightly faster you change two values and the whole page feels snappier.

This is what professional CSS looks like. Not just working code but organized, intentional, maintainable code that another developer could open and understand immediately.