La nueva función random() de CSS permite asignar valores aleatorios a las propiedades de estilo directamente desde la hoja de estilos, sin necesidad de JavaScript. Está disponible de forma experimental en Polypane 29+, Safari 26.2+ y Chromium 148+ con las funciones experimentales activadas; Firefox aún no la implementa.
Este artículo recorre, mediante ejemplos editables, cómo aprovechar random() para generar diseños creativos. El primer caso es un efecto bokeh fotográfico: círculos que varían en posición, tamaño, color, desenfoque y opacidad. Para que el ancho y el alto compartan el mismo valor aleatorio dentro de cada elemento se usa la palabra clave element-scoped (que pasará a llamarse per-element), y para evitar desbordes se combina random() con calc().
El color se construye con hsl() y un tono aleatorio entre 0 y 360, manteniendo fija la saturación y la luminosidad. El desenfoque y el contraste también se generan con random(), y un mix-blend-mode de plus-lighter reproduce la superposición luminosa característica del bokeh.
El texto advierte de que la implementación todavía es inestable: algunos ejemplos funcionan de forma desigual en Safari y el comportamiento cambió entre Chromium 148, 149 y 150, por lo que se recomienda probar los demos en Polypane.