CSS Variables Explained for Beginners

CSS variables are one of the easiest ways to make your stylesheets cleaner, more flexible and easier to maintain.

Instead of repeating the same color, spacing value, shadow or font size again and again, you can define it once and reuse it throughout your CSS.

For example, instead of writing this:

.button {
  background: #2563eb;
}

.card-title {
  color: #2563eb;
}

.link {
  color: #2563eb;
}

You can define a variable:

:root {
  --color-primary: #2563eb;
}

And reuse it:

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

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

.link {
  color: var(--color-primary);
}

Now, if you want to change the primary color, you only need to update it in one place.

In this guide, you will learn what CSS variables are, how they work, when to use them and how to generate reusable custom properties with the free CSS Variable Generator by Free Utilities Online.

What Are CSS Variables?

CSS variables are reusable values that you can define in your CSS and use later.

They are officially called custom properties.

A CSS variable usually starts with two dashes:

--color-primary: #2563eb;

Then you use it with the var() function:

color: var(--color-primary);

A complete example:

:root {
  --color-primary: #2563eb;
  --color-text: #111827;
  --radius-card: 16px;
}

.card {
  color: var(--color-text);
  border-radius: var(--radius-card);
}

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

CSS variables are especially useful for values you reuse often, such as colors, spacing, font sizes, border radius, shadows and theme settings.

Why Use CSS Variables?

CSS variables make your styles easier to update and maintain.

Without variables, you may repeat the same value many times:

.header {
  color: #2563eb;
}

.button {
  background: #2563eb;
}

.link {
  color: #2563eb;
}

.badge {
  border-color: #2563eb;
}

If you later change your brand color, you must find every instance manually.

With variables:

:root {
  --color-primary: #2563eb;
}

.header {
  color: var(--color-primary);
}

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

.link {
  color: var(--color-primary);
}

.badge {
  border-color: var(--color-primary);
}

Now the design is easier to control.

CSS variables help with:

  • color systems;

  • spacing systems;

  • typography scales;

  • border radius values;

  • shadows;

  • dark mode;

  • themes;

  • component variants;

  • design tokens;

  • reusable UI components.

Basic CSS Variable Syntax

CSS variables are usually defined like this:

--variable-name: value;

Example:

--color-primary: #2563eb;
--spacing-md: 1rem;
--radius-lg: 24px;

To use a variable, write:

var(--variable-name)

Example:

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

The variable name is case-sensitive, so this:

--color-primary

Is different from this:

--Color-Primary

For consistency, it is best to use lowercase names.

Where to Define CSS Variables

Most global CSS variables are defined inside :root.

:root {
  --color-primary: #2563eb;
  --color-text: #111827;
  --color-background: #ffffff;
}

The :root selector targets the highest-level element in the document. Variables defined there are available throughout the page.

This is useful for site-wide values such as:

  • brand colors;

  • text colors;

  • background colors;

  • spacing values;

  • border radius values;

  • typography values;

  • shadow presets.

Example:

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-surface: #ffffff;
  --color-text: #111827;
  --radius-md: 16px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.10);
}

Then use them anywhere:

.card {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

CSS Variables for Colors

Colors are one of the best use cases for CSS variables.

Example:

:root {
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-text: #111827;
  --color-muted: #64748b;
  --color-background: #ffffff;
  --color-surface: #f8fafc;
}

Then use them across your design:

body {
  color: var(--color-text);
  background: var(--color-background);
}

.button-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.card {
  background: var(--color-surface);
}

This makes it much easier to update a color palette later.

Instead of searching your whole CSS file for hex codes, you update the variable once.

CSS Variables for Spacing

Spacing variables help keep layouts consistent.

Example:

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
}

Use them like this:

.card {
  padding: var(--space-lg);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section {
  padding-block: var(--space-xl);
}

This prevents random spacing values from spreading across your CSS.

Instead of using 13px, 17px, 22px and 29px everywhere, you create a consistent spacing scale.

CSS Variables for Border Radius

Border radius variables help create a consistent shape system.

Example:

:root {
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
}

Use them like this:

.card {
  border-radius: var(--radius-lg);
}

.button {
  border-radius: var(--radius-full);
}

.input {
  border-radius: var(--radius-md);
}

This keeps cards, buttons, inputs and panels visually related.

CSS Variables for Shadows

Box shadows can be long and repetitive. Variables make them easier to manage.

Example:

:root {
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.16);
}

Then:

.card {
  box-shadow: var(--shadow-md);
}

.modal {
  box-shadow: var(--shadow-lg);
}

.button {
  box-shadow: var(--shadow-sm);
}

This is cleaner than repeating shadow values in every component.

CSS Variables for Typography

You can also use CSS variables for font sizes, line heights and font weights.

Example:

:root {
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --line-height-body: 1.7;
  --line-height-heading: 1.1;
}

Use them like this:

body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-heading);
}

For responsive typography, CSS variables can also store clamp() values:

:root {
  --font-size-hero: clamp(2.5rem, 8vw, 6rem);
}

.hero-title {
  font-size: var(--font-size-hero);
}

This is useful when building a flexible design system.

CSS Variables with Fallback Values

The var() function can include a fallback value.

Example:

.button {
  background: var(--color-primary, #2563eb);
}

This means:

  • use --color-primary if it exists;

  • otherwise use #2563eb.

Fallbacks are useful when a variable may not be defined in every context.

Another example:

.card {
  border-radius: var(--card-radius, 16px);
}

If --card-radius is missing, the card still gets 16px.

Local CSS Variables

CSS variables do not need to be global. You can define them inside a specific component.

Example:

.card {
  --card-bg: #ffffff;
  --card-radius: 20px;
  --card-padding: 1.5rem;

  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

This keeps component-specific values close to the component.

You can also override them in variants:

.card-featured {
  --card-bg: #eff6ff;
  --card-radius: 28px;
}

The same .card styles can now produce a different visual result.

CSS Variables and the Cascade

CSS variables participate in the cascade.

That means a variable can be defined globally and then overridden in a more specific context.

Example:

:root {
  --button-bg: #2563eb;
}

.button {
  background: var(--button-bg);
}

.button-danger {
  --button-bg: #dc2626;
}

Both buttons use the same .button rule, but the danger button changes the variable.

This is one of the most powerful things about CSS variables.

Instead of rewriting the full component, you only change the values.

CSS Variables for Themes

CSS variables are very useful for themes.

A light theme:

:root {
  --color-bg: #ffffff;
  --color-text: #111827;
  --color-surface: #f8fafc;
}

A dark theme:

[data-theme="dark"] {
  --color-bg: #020617;
  --color-text: #f8fafc;
  --color-surface: #111827;
}

Then your components use the variables:

body {
  background: var(--color-bg);
  color: var(--color-text);
}

.card {
  background: var(--color-surface);
}

When the theme changes, the components update automatically.

This is much cleaner than writing separate dark mode styles for every component.

CSS Variables for Button Variants

CSS variables are perfect for button systems.

Example:

.button {
  --button-bg: #2563eb;
  --button-color: #ffffff;
  --button-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);

  background: var(--button-bg);
  color: var(--button-color);
  box-shadow: var(--button-shadow);
}

Then create variants:

.button-secondary {
  --button-bg: #e5e7eb;
  --button-color: #111827;
  --button-shadow: none;
}

.button-danger {
  --button-bg: #dc2626;
  --button-color: #ffffff;
  --button-shadow: 0 10px 24px rgba(220, 38, 38, 0.24);
}

This keeps the button system flexible and avoids repeating the same full CSS block.

CSS Variables for Gradients

Gradients can also use variables.

Example:

:root {
  --gradient-start: #2563eb;
  --gradient-end: #7c3aed;
}

.hero {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

This makes it easy to update gradient colors across multiple sections.

You can also use variables inside buttons:

.button-gradient {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

This works especially well when your gradients come from a defined color palette.

CSS Variables and Media Queries

CSS variables can be changed inside media queries.

Example:

:root {
  --section-padding: 3rem;
}

@media (min-width: 768px) {
  :root {
    --section-padding: 5rem;
  }
}

.section {
  padding-block: var(--section-padding);
}

The .section rule stays the same. Only the variable changes.

This can make responsive CSS cleaner.

You can also combine variables with clamp():

:root {
  --section-padding: clamp(3rem, 8vw, 7rem);
}

This often reduces the need for multiple media queries.

Naming CSS Variables

Good variable names should be clear and consistent.

Examples:

--color-primary
--color-text
--color-surface
--space-md
--radius-lg
--shadow-soft
--font-size-body

Avoid names that are too vague:

--blue
--big
--thing
--box
--nice-color

Also avoid names that are too tied to one design decision if the meaning may change.

For example, this may become confusing later:

--blue-button: #2563eb;

This is more flexible:

--color-primary: #2563eb;

If your primary color changes from blue to purple, the name still makes sense.

Design Tokens and CSS Variables

CSS variables are often used as design tokens.

Design tokens are named values that define the visual system of a project.

Examples:

:root {
  --color-primary: #2563eb;
  --color-background: #ffffff;
  --space-md: 1rem;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.10);
}

These values become the foundation of your UI.

Instead of making random design decisions in every component, you create a shared system.

This is useful for:

  • websites;

  • design systems;

  • component libraries;

  • WordPress themes;

  • SaaS interfaces;

  • dashboards;

  • landing pages;

  • dark mode systems.

Common CSS Variable Mistakes

1. Creating Too Many Variables

Variables are useful, but not every single value needs a variable.

Avoid creating variables for values that are only used once and are unlikely to change.

Good candidates:

  • brand colors;

  • spacing scale;

  • radius scale;

  • shadow presets;

  • typography scale;

  • theme colors.

Less useful candidates:

  • one-off decorative values;

  • random animation delays;

  • tiny component-specific tweaks.

2. Using Unclear Names

A variable name should explain its purpose.

Avoid:

--color-1: #2563eb;
--color-2: #111827;

Better:

--color-primary: #2563eb;
--color-text: #111827;

Clear names make your CSS easier to understand later.

3. Forgetting Fallbacks

If a variable might not exist, use a fallback.

color: var(--text-color, #111827);

This prevents the value from breaking if the variable is missing.

4. Mixing Random Naming Systems

Avoid mixing different naming styles:

--primaryColor
--color-primary
--main_color
--MainColor

Pick one convention and use it everywhere.

A good option:

--color-primary
--space-md
--radius-lg

5. Replacing Every CSS Rule with Variables

CSS variables should make your code easier to maintain, not harder to read.

Use them where they create real consistency or flexibility.

Practical CSS Variables Starter System

Here is a simple starter system you can adapt:

:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-text: #111827;
  --color-muted: #64748b;
  --color-background: #ffffff;
  --color-surface: #f8fafc;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.16);
}

And here is how you might use it:

.card {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.button {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
}

This gives you a clean foundation for UI design.

Generate CSS Variables Online

You can write CSS variables manually, but a generator can help you create a cleaner starting system faster.

With the free CSS Variable Generator by Free Utilities Online, you can:

  • create reusable custom properties;

  • organize colors, spacing, radius and shadows;

  • generate clean :root variables;

  • copy ready-to-use CSS;

  • build a foundation for design systems;

  • prepare variables for buttons, cards, gradients and themes.

This is useful for websites, landing pages, UI kits, WordPress themes, design systems and frontend projects.

Related Free CSS Tools

You may also find these tools useful:

Together, these tools help you create reusable CSS systems with better colors, spacing, responsive values, shadows and accessible contrast.

FAQ

What are CSS variables?

CSS variables, also called custom properties, are reusable values defined in CSS. They usually start with two dashes and are used with the var() function.

How do you create a CSS variable?

You can create a CSS variable by defining a custom property, usually inside :root. For example: --color-primary: #2563eb;.

How do you use a CSS variable?

Use the var() function. For example: color: var(--color-primary);.

Are CSS variables the same as Sass variables?

No. Sass variables are processed before CSS reaches the browser. CSS variables work in the browser, participate in the cascade and can change based on selectors, themes and media queries.

Should I use CSS variables for colors?

Yes. Colors are one of the best use cases for CSS variables because they are reused often and may need to change across themes or design systems.

Final Tip

CSS variables are a simple way to make your styles more consistent and easier to maintain.

Start with colors, spacing, radius and shadows. Then use variables for themes, buttons, gradients and responsive values.

Try the CSS Variable Generator to create reusable custom properties and copy clean CSS for your next project.

Related Posts

Scroll al inicio