Explorando a Função CSS random()

O CSS sempre dependeu do JavaScript quando era necessária aleatoriedade — posições dispersas, atrasos de animação variados, mudanças de cor imprevisíveis. Essa dependência pode estar prestes a diminuir. A função random() do CSS, parte da especificação CSS Values and Units Module Level 5, permite que folhas de estilo gerem valores numéricos aleatórios diretamente, sem necessidade de scripts.

É experimental. O suporte dos navegadores é limitado. Mas vale a pena entender agora.

O Que a Função CSS random() Realmente Faz

A ideia central é direta: você define um valor mínimo, um valor máximo e, opcionalmente, um incremento de passo. O CSS escolhe um número desse intervalo e o aplica.

.card {
  top: random(5rem, 20rem);        /* qualquer valor entre 5rem e 20rem */
  rotate: random(0deg, 360deg);    /* rotação aleatória */
  animation-delay: random(0s, 3s); /* temporização de animação escalonada */
}

É isso. Sem Math.random(), sem estilos inline, sem loops JavaScript gerando centenas de regras :nth-child().

Uma restrição importante: todos os argumentos devem compartilhar o mesmo tipo de unidade. Você não pode misturar rem com px ou % com em. Escolha uma unidade e mantenha a consistência.

A Sintaxe

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

O rascunho atual da especificação define a função de forma mais formal, mas esta forma simplificada é a maneira mais fácil de entendê-la na prática.

O parâmetro by controla o incremento. Sem ele, você pode obter valores decimais como 13.47px. Com ele, você restringe a saída a uma sequência previsível:

/* Valores possíveis: 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

Nota: o valor máximo nem sempre é alcançável ao usar passos. random(100px, 200px, by 30px) só pode produzir 100px, 130px, 160px ou 190px — nunca 200px.

Controlando Como a Aleatoriedade é Compartilhada

É aqui que a função CSS random() se torna genuinamente interessante. Por padrão, cada instância de random() em uma folha de estilo resolve para um único valor em cache compartilhado por todos os elementos que usam esse estilo.

Para dar a cada elemento seu próprio valor único, use a palavra-chave per-element ou um identificador com traço:

/* Cada elemento obtém seu próprio valor aleatório */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* Ambas as propriedades compartilham o mesmo valor dentro de um elemento */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* corresponde à largura */
}

/* Todos os elementos correspondentes compartilham o mesmo valor nomeado globalmente */
.badge {
  width: random(--element-shared, 50px, 150px);
}

A palavra-chave per-element é uma opção de cache integrada que instrui o navegador a resolver um valor aleatório distinto para cada elemento que corresponda ao seletor. Um identificador com traço como --size vincula múltiplas chamadas random() para que resolvam para o mesmo valor dentro de um determinado elemento — útil quando você quer um quadrado com largura e altura aleatórias mas consistentes. Um identificador com traço como --element-shared também pode atuar como uma chave de cache nomeada entre elementos correspondentes.

Este sistema de cache é deliberado e bem projetado — mas também é onde a confusão tende a surgir. Entendê-lo cedo economiza tempo de depuração mais tarde.

CSS random() vs. SCSS random()

Se você já usou random() no Sass, o comportamento difere de algumas maneiras importantes:

O CSS random() gera um novo valor a cada carregamento de página. O SCSS trava o valor no momento da compilação. Eles servem propósitos diferentes.

Suporte dos Navegadores

No início de 2026, random() no CSS foi implementado no Safari 26.2. Um suporte mais amplo entre navegadores ainda não está garantido, então você ainda deve tratá-lo como um recurso experimental e usar @supports para aprimoramento progressivo com um fallback sensato:

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

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

O CSS Working Group adotou a função em 2022, e a especificação continua a evoluir. Questões em aberto permanecem, e a sintaxe final ainda pode mudar antes da implementação ampla.

Conclusão

A função CSS random() não substituirá o JavaScript para aleatoriedade orientada por lógica ou qualquer coisa que exija imprevisibilidade criptográfica. Mas para variação puramente visual — layouts dispersos, temporização de animação orgânica, fundos generativos — é uma solução limpa e declarativa que pertence à folha de estilo.

Experimente no Safari 26.2, mantenha fallbacks no lugar e acompanhe o progresso da especificação. A lacuna entre experimental e amplamente disponível está se fechando.

Perguntas Frequentes

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.