06 · Random

Random

Variation without JS using random()

Experimental · Chrome 125+ with flag
← Index

Decorative demo with fallback: if random() is unavailable, it uses fixed positions.

css
.p {
  position: absolute;
  left: random(5%, 92%);      /* posición X aleatoria */
  top:  random(5%, 85%);      /* posición Y aleatoria */
  width:  random(--sz, 6px, 18px);  /* tamaño aleatorio */
  height: random(--sz, 6px, 18px); /* mismo valor que width */
  opacity: random(.3, .9);    /* transparencia aleatoria */
  scale:   random(--sc, .6, 1.4);   /* escala aleatoria */
  animation: drift random(3s, 7s) ease-in-out infinite alternate;
  animation-delay: random(0s, 4s);
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".