Die CSS-Funktion random() erkunden

CSS war bisher auf JavaScript angewiesen, wenn Zufälligkeit benötigt wurde – verstreute Positionen, variierende Animationsverzögerungen, unvorhersehbare Farbwechsel. Diese Abhängigkeit könnte bald abnehmen. Die CSS-Funktion random(), Teil der Spezifikation CSS Values and Units Module Level 5, ermöglicht es Stylesheets, zufällige numerische Werte direkt zu generieren – ganz ohne Scripting.

Sie ist experimentell. Die Browser-Unterstützung ist begrenzt. Aber es lohnt sich, sie jetzt zu verstehen.

Was die CSS-Funktion random() tatsächlich macht

Die Grundidee ist einfach: Sie definieren einen Minimalwert, einen Maximalwert und optional ein Schrittinkrement. CSS wählt eine Zahl aus diesem Bereich und wendet sie an.

.card {
  top: random(5rem, 20rem);        /* beliebiger Wert zwischen 5rem und 20rem */
  rotate: random(0deg, 360deg);    /* zufällige Rotation */
  animation-delay: random(0s, 3s); /* gestaffeltes Animations-Timing */
}

Das war’s. Kein Math.random(), keine Inline-Styles, keine JavaScript-Schleifen, die Hunderte von :nth-child()-Regeln generieren.

Eine wichtige Einschränkung: Alle Argumente müssen denselben Einheitentyp verwenden. Sie können nicht rem mit px oder % mit em mischen. Wählen Sie eine Einheit und bleiben Sie konsistent.

Die Syntax

random(<caching-options>?, <min>, <max>, [by <step>]?)

Die aktuelle Entwurfsspezifikation definiert die Funktion formaler, aber diese vereinfachte Form ist der einfachste Weg, sie in der Praxis zu verstehen.

Der Parameter by steuert die Schrittweite. Ohne ihn erhalten Sie möglicherweise Dezimalwerte wie 13.47px. Mit ihm beschränken Sie die Ausgabe auf eine vorhersehbare Sequenz:

/* Mögliche Werte: 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

Hinweis: Der Maximalwert ist bei Verwendung von Schritten nicht immer erreichbar. random(100px, 200px, by 30px) kann nur 100px, 130px, 160px oder 190px erzeugen – niemals 200px.

Steuerung der gemeinsamen Nutzung von Zufälligkeit

Hier wird die CSS-Funktion random() wirklich interessant. Standardmäßig löst jede random()-Instanz in einem Stylesheet zu einem einzigen gecachten Wert auf, der von allen Elementen geteilt wird, die diesen Stil verwenden.

Um jedem Element seinen eigenen eindeutigen Wert zu geben, verwenden Sie das Schlüsselwort per-element oder einen Dashed-Ident:

/* Jedes Element erhält seinen eigenen Zufallswert */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* Beide Eigenschaften teilen sich denselben Wert innerhalb eines Elements */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* entspricht width */
}

/* Alle übereinstimmenden Elemente teilen sich global denselben benannten Wert */
.badge {
  width: random(--element-shared, 50px, 150px);
}

Das Schlüsselwort per-element ist eine eingebaute Caching-Option, die dem Browser mitteilt, für jedes Element, das auf den Selektor passt, einen eigenen Zufallswert aufzulösen. Ein Dashed-Ident wie --size verknüpft mehrere random()-Aufrufe, sodass sie innerhalb eines bestimmten Elements zum selben Wert aufgelöst werden – nützlich, wenn Sie ein Quadrat mit einer zufälligen, aber konsistenten Breite und Höhe möchten. Ein Dashed-Ident wie --element-shared kann auch als benannter Cache-Schlüssel über übereinstimmende Elemente hinweg fungieren.

Dieses Caching-System ist bewusst und gut durchdacht – aber es ist auch der Punkt, an dem typischerweise Verwirrung aufkommt. Es früh zu verstehen, spart später Debugging-Zeit.

CSS random() vs. SCSS random()

Wenn Sie random() in Sass verwendet haben, unterscheidet sich das Verhalten in einigen wesentlichen Punkten:

CSS random() generiert bei jedem Seitenladen einen neuen Wert. SCSS fixiert den Wert zur Build-Zeit. Sie dienen unterschiedlichen Zwecken.

Browser-Unterstützung

Anfang 2026 wurde random() in CSS in Safari 26.2 ausgeliefert. Eine breitere browserübergreifende Unterstützung ist noch nicht garantiert, daher sollten Sie es weiterhin als experimentelles Feature behandeln und @supports für progressive Enhancement mit einem sinnvollen Fallback verwenden:

.element {
  top: 10rem; /* Fallback */
}

@supports (top: random(1rem, 5rem)) {
  .element {
    top: random(5rem, 20rem);
  }
}

Die CSS Working Group hat die Funktion 2022 übernommen, und die Spezifikation entwickelt sich weiter. Es gibt noch offene Fragen, und die endgültige Syntax könnte sich vor der breiten Implementierung noch ändern.

Fazit

Die CSS-Funktion random() wird JavaScript nicht für logikgesteuerte Zufälligkeit oder alles, was kryptografische Unvorhersehbarkeit erfordert, ersetzen. Aber für rein visuelle Variation – verstreute Layouts, organisches Animations-Timing, generative Hintergründe – ist sie eine saubere, deklarative Lösung, die ins Stylesheet gehört.

Probieren Sie sie in Safari 26.2 aus, halten Sie Fallbacks bereit und beobachten Sie den Fortschritt der Spezifikation. Die Lücke zwischen experimentell und breit verfügbar schließt sich.

Häufig gestellte Fragen (FAQs)

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.