CSS Custom Properties

Zuletzt aktualisiert am 10. Februar 2026

Im letzten Artikel hast du viele verschiedene Farbwerte wie #1a56db geschrieben. Stell dir vor, du möchtest diese Farbe auf deiner ganzen Website ändern. Du müsstest jeden einzelnen Hex-Wert suchen und ersetzen. CSS Custom Properties (auch CSS-Variablen genannt) lösen genau dieses Problem: Du definierst einen Wert einmal und verwendest ihn überall.

Custom Properties definieren

Eine Custom Property beginnt immer mit zwei Bindestrichen (--) gefolgt von einem Namen. Du definierst sie wie jede andere CSS-Eigenschaft:

Custom Properties auf :root

:root {
  --farbe-primary: #1a56db;
  --farbe-hintergrund: #dbeafe;
  --abstand: 16px;
}

.box {
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-primary);
  color: var(--farbe-primary);
  padding: var(--abstand);
}

<div class="box">Dieses Element nutzt Custom Properties.</div>

:root ist ein Selektor, der auf das <html>-Element zeigt. Custom Properties, die du dort definierst, stehen im gesamten Dokument zur Verfügung. Das ist der übliche Ort für globale Design-Werte.

Custom Properties verwenden

Mit der var()-Funktion greifst du auf den Wert einer Custom Property zu:

var() in der Praxis

:root {
  --primary: #1a56db;
  --radius: 8px;
}

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

.card {
  border: 2px solid var(--primary);
  border-radius: var(--radius);
}

<button class="button">Button</button>
<div class="card" style="margin-top:12px">Karte mit demselben Blau und Radius.</div>

Änderst du --primary auf :root, ändert sich die Farbe automatisch bei Button und Karte. Das ist der Kern von Custom Properties: Eine Stelle ändern, überall wirksam.

Scope und Vererbung

Custom Properties folgen der normalen CSS-Vererbung. Das bedeutet: Du kannst sie auf jedem Element definieren, und alle Kinder erben den Wert.

Lokaler Scope überschreibt globalen

:root {
  --farbe: #1a56db;
}

.bereich-a {
  --farbe: #dc2626;
}

.bereich-b {
  --farbe: #059669;
}

.box {
  color: var(--farbe);
  border-left: 4px solid var(--farbe);
}

<div class="box">Root: Blau (--farbe: #1a56db)</div>
<div class="bereich-a">
<div class="box">Bereich A: Rot (--farbe: #dc2626)</div>
</div>
<div class="bereich-b">
<div class="box">Bereich B: Grün (--farbe: #059669)</div>
</div>

.box verwendet immer var(--farbe), aber der tatsächliche Wert hängt davon ab, wo sich die Box im DOM befindet. Im Bereich A ist --farbe rot, im Bereich B grün, und außerhalb beider Bereiche gilt der globale blaue Wert von :root.

Fallback-Werte

Die var()-Funktion akzeptiert einen zweiten Parameter: einen Fallback-Wert, der greift, wenn die Custom Property nicht definiert ist.

Fallback in var()

.element {
  /* --nicht-definiert existiert nicht → #dc2626 wird verwendet */
  color: var(--nicht-definiert, #dc2626);

  /* Verschachtelte var() als Fallback */
  background: var(--theme-bg, var(--default-bg, #f3f4f6));
}

<div class="mit-fallback">Fallback-Werte: rot auf gelb.</div>

Fallbacks sind besonders nützlich, wenn du Komponenten baust, die auch ohne bestimmte Custom Properties funktionieren sollen. Der Fallback-Wert kann sogar eine weitere var()-Funktion sein.

Theming mit Custom Properties

Der häufigste Einsatzzweck für Custom Properties ist ein Theme-System. Du definierst alle Farben als Variablen und tauschst sie je nach Kontext aus:

Dark/Light Theme

.theme-light {
  --bg: #ffffff;
  --text: #1f2937;
  --primary: #1a56db;
  --surface: #f3f4f6;
}

.theme-dark {
  --bg: #1f2937;
  --text: #f3f4f6;
  --primary: #60a5fa;
  --surface: #374151;
}

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

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

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

<div class="theme-light demo-page">
<strong>Light Theme</strong>
<div class="demo-card">Karte mit <span class="demo-link">einem Link</span></div>
</div>
<div class="theme-dark demo-page">
<strong>Dark Theme</strong>
<div class="demo-card">Karte mit <span class="demo-link">einem Link</span></div>
</div>

Das CSS für .page, .card und .link bleibt identisch. Nur die Custom Properties ändern sich je nach Theme-Klasse. Das macht Theming wartbar: Neue Farben anpassen bedeutet, ein paar Variablen zu ändern, nicht hunderte Regeln zu durchsuchen.

Custom Properties vs. Präprozessor-Variablen

Wenn du von Sass oder Less gehört hast: Diese Tools bieten auch Variablen ($farbe in Sass, @farbe in Less). Der entscheidende Unterschied liegt im Zeitpunkt:

Eigenschaft	CSS Custom Properties	Sass/Less-Variablen
Zeitpunkt	Laufzeit (im Browser)	Build-Zeit (beim Kompilieren)
Scope	Folgt dem DOM (Vererbung)	Folgt dem Code (lexikalisch)
Dynamisch änderbar	Ja (per JavaScript, Media Queries)	Nein (nach dem Build fixiert)
Fallback-Werte	`var(--x, fallback)`	Nicht möglich
Theming	Per Klasse oder Media Query	Nur durch Neukompilierung
Browser-Support	Alle modernen Browser	Braucht Build-Tool

CSS Custom Properties sind echte CSS-Features, die im Browser leben. Sass-Variablen sind Platzhalter, die beim Kompilieren durch feste Werte ersetzt werden. Für Theming und dynamische Werte sind Custom Properties die bessere Wahl.

Häufige Fehler

Fehlende Bindestriche: Custom Properties brauchen zwei Bindestriche am Anfang. --farbe ist korrekt, -farbe oder farbe nicht.
var() vergessen: color: --farbe funktioniert nicht. Du musst immer color: var(--farbe) schreiben.
Custom Properties in Werten ohne var() verwenden: Innerhalb von calc() brauchst du var(). Richtig: calc(var(--abstand) * 2). Falsch: calc(--abstand * 2).
Groß/Kleinschreibung ignorieren: --Farbe und --farbe sind zwei verschiedene Custom Properties. Halte dich an eine Konvention, am besten durchgehend Kleinbuchstaben mit Bindestrichen.
Alles als Custom Property definieren: Nicht jeder Wert braucht eine Variable. Nutze Custom Properties für Werte, die wiederverwendet oder ausgetauscht werden sollen (Farben, Abstände, Radien). Einmalige Werte wie border: 1px solid können direkt stehen.

Zusammenfassung

Konzept	Beschreibung
Definition	`--name: wert;` (immer mit zwei Bindestrichen)
Verwendung	`var(--name)` um den Wert abzurufen
Scope	Folgt der CSS-Vererbung, lokal überschreibbar
Fallback	`var(--name, fallback)` wenn die Property nicht existiert
`:root`	Globaler Scope für projektweite Variablen
Theming	Variablen pro Theme-Klasse überschreiben
Laufzeit	Im Browser verfügbar, per JavaScript änderbar
Namenskonvention	Kleinbuchstaben mit Bindestrichen (`--farbe-primary`)

Du kannst jetzt Werte zentral definieren und dein CSS wartbarer gestalten. Im nächsten Artikel geht es um CSS Funktionen: calc(), min(), max(), clamp() und wie du damit flexible Berechnungen direkt in CSS schreibst.

Erhalte neue Inhalte direkt in dein Postfach

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.