Explorando la función random() de CSS

CSS siempre ha dependido de JavaScript cuando se necesitaba aleatoriedad: posiciones dispersas, retrasos de animación variados, cambios de color impredecibles. Esa dependencia podría reducirse pronto. La función random() de CSS, parte de la especificación CSS Values and Units Module Level 5, permite que las hojas de estilo generen valores numéricos aleatorios directamente, sin necesidad de scripting.

Es experimental. El soporte de navegadores es limitado. Pero vale la pena entenderla ahora.

Qué hace realmente la función random() de CSS

La idea central es sencilla: defines un valor mínimo, un valor máximo y, opcionalmente, un incremento de paso. CSS selecciona un número de ese rango y lo aplica.

.card {
  top: random(5rem, 20rem);        /* any value between 5rem and 20rem */
  rotate: random(0deg, 360deg);    /* random rotation */
  animation-delay: random(0s, 3s); /* staggered animation timing */
}

Eso es todo. Sin Math.random(), sin estilos en línea, sin bucles de JavaScript generando cientos de reglas :nth-child().

Una restricción importante: todos los argumentos deben compartir el mismo tipo de unidad. No puedes mezclar rem con px o % con em. Elige una unidad y mantén la coherencia.

La sintaxis

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

El borrador actual de la especificación define la función de manera más formal, pero esta forma simplificada es la manera más fácil de entenderla en la práctica.

El parámetro by controla el paso. Sin él, puedes obtener valores decimales como 13.47px. Con él, restringes la salida a una secuencia predecible:

/* Possible values: 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

Nota: el valor máximo no siempre es alcanzable cuando se usan pasos. random(100px, 200px, by 30px) solo puede producir 100px, 130px, 160px o 190px, nunca 200px.

Controlando cómo se comparte la aleatoriedad

Aquí es donde la función random() de CSS se vuelve genuinamente interesante. Por defecto, cada instancia de random() en una hoja de estilo se resuelve a un único valor en caché compartido por todos los elementos que usan ese estilo.

Para dar a cada elemento su propio valor único, usa la palabra clave per-element o un identificador con guiones:

/* Each element gets its own random value */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* Both properties share the same value within one element */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* matches width */
}

/* All matched elements share the same named value globally */
.badge {
  width: random(--element-shared, 50px, 150px);
}

La palabra clave per-element es una opción de caché integrada que indica al navegador que resuelva un valor aleatorio distinto para cada elemento que coincida con el selector. Un identificador con guiones como --size vincula múltiples llamadas a random() para que se resuelvan al mismo valor dentro de un elemento dado, útil cuando quieres un cuadrado con un ancho y alto aleatorios pero consistentes. Un identificador con guiones como --element-shared también puede actuar como una clave de caché nombrada entre elementos coincidentes.

Este sistema de caché es deliberado y está bien diseñado, pero también es donde tiende a surgir la confusión. Entenderlo temprano te ahorra tiempo de depuración más adelante.

CSS random() vs. SCSS random()

Si has usado random() en Sass, el comportamiento difiere en algunos aspectos clave:

random() de CSS genera un nuevo valor en cada carga de página. SCSS bloquea el valor en tiempo de compilación. Sirven para propósitos diferentes.

Soporte de navegadores

A principios de 2026, random() en CSS se ha implementado en Safari 26.2. El soporte más amplio entre navegadores aún no está garantizado, por lo que debes tratarla como una característica experimental y usar @supports para mejora progresiva con una alternativa sensata:

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

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

El Grupo de Trabajo de CSS adoptó la función en 2022, y la especificación continúa evolucionando. Quedan problemas abiertos, y la sintaxis final aún podría cambiar antes de una implementación amplia.

Conclusión

La función random() de CSS no reemplazará a JavaScript para aleatoriedad impulsada por lógica o cualquier cosa que requiera imprevisibilidad criptográfica. Pero para variación puramente visual (diseños dispersos, temporización de animación orgánica, fondos generativos) es una solución limpia y declarativa que pertenece a la hoja de estilo.

Pruébala en Safari 26.2, mantén alternativas implementadas y observa el progreso de la especificación. La brecha entre experimental y ampliamente disponible se está cerrando.

Preguntas frecuentes

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.