Функция CSS `random()`

random() — это CSS-функция, которая генерирует случайное значение в заданном диапазоне, при необходимости ограничивая возможные значения интервалами с заданным шагом между этими пределами. Её можно использовать при указании <length>, <frequency>, <angle>, <time>, <resolution>, <percentage>, <number> или <integer> в значении свойства.

Попробуйте

<div class="box"></div>

.box {
  rotate: random(element-shared, 0deg, 360deg);
  width: random(element-shared, 50px, 300px);
  background-color: hsl(random(element-shared, 0, 360) 50% 50%);
  height: random(element-shared, 50px, 300px);
}

@supports not (order: random(1, 2)) {
  body::before {
    content: "Your browser doesn't support the random() function.";
  }
}

Синтаксис

/* Basic usage */
random(0, 100)
random(10px, 500px)
random(0deg, 360deg)

/* With step interval */
random(0, 100, 10)
random(0rad, 1turn, 30deg)

/* With base value */
random(auto, 0, 360)
random(element-shared, 0s, 5s)
random(--unique-base, 400px, 100px)
random(fixed 0.5, 1em, 40vw)
random(--unique-base element-shared, 100dpi, 300dpi)

/* With base and step values */
random(element-shared, 0deg, 360deg, 45deg)
random(--my-base, 1em, 3rem, 2px)

Параметры

<random-value-sharing> Необязательный

Определяет, какие функции random() в документе будут использовать общее базовое случайное значение, а какие получат отдельные значения. Можно указать одно из следующих значений или одновременно пользовательский ключ и ключевое слово element-shared, разделив их пробелом:

auto

Каждое использование random() в стилях элемента получает собственное уникальное базовое случайное значение.

<dashed-ident>

Пользовательский ключ (например, --my-random-key) для совместного использования одного базового случайного значения свойствами элемента.

element-shared

Одно базовое случайное значение используется всеми элементами для одного и того же свойства с этим ключевым словом. Это базовое значение не зависит от функций random(), включённых в значения других свойств того же элемента, если только в этих функциях случайных значений также не используется тот же пользовательский ключ.

fixed <number>

Задаёт базовое значение в диапазоне от 0 до 1 включительно, на основе которого генерируется случайное значение.

<calc-sum>, <calc-sum>

Два обязательных значения <number>, <dimension> или <percentage>, разделённых запятыми, либо вычисления, результатом которых являются значения одного из этих типов. Они задают соответственно минимальное и максимальное значения. Оба значения должны иметь один и тот же тип данных. Если максимальное значение меньше минимального, функция вернёт первое значение <calc-sum>.

<calc-sum> Необязательный

Необязательное третье значение <calc-sum>, перед которым ставится запятая, задаёт интервал шага. Если оно указано и имеет тот же тип данных, что и два разделённых запятыми значения <calc-sum> — минимальное и максимальное, — возвращаемым значением будет минимальное значение или значение, увеличенное на шаг от минимального, вплоть до максимального.

Возвращаемое значение

Возвращает случайное значение типа <number>, <dimension> или <percentage> в заданном диапазоне от минимального до максимального значения включительно, того же типа, что и параметры <calc-sum>.

Описание

Функция random(SEED, MIN, MAX, STEP) задаёт минимальное и максимальное значения, а также необязательные приращения шага, начиная с минимального значения. Функция генерирует случайный результат в заданном диапазоне. Начальное значение, передаваемое необязательным параметром <random-value-sharing>, позволяет использовать общие или разные базовые случайные значения для разных свойств и элементов.

Для корректной работы функции минимальное, максимальное значения и шаг должны иметь один и тот же тип данных. Единицы измерения в двух или трёх параметрах <calc-sum> могут различаться, но тип данных должен быть одинаковым: например, <number>, <percentage>, <length>, <angle>, <time> или <frequency>.

Базовое случайное значение

Базовое случайное значение работает как начальное значение для генератора случайных чисел. Это исходное число, используемое для получения окончательного случайного результата. Если две функции random() используют одно и то же базовое значение, их результаты изменяются совместно по предсказуемому шаблону. При разных базовых значениях их результаты полностью независимы друг от друга.

Необязательный первый параметр <random-value-sharing> определяет, как используется общее базовое случайное значение. Совместное использование позволяет повторно использовать одно и то же случайно сгенерированное значение, что необходимо для некоторых визуальных эффектов. Значение можно задать как auto, ключевое слово element-shared, пользовательский <dashed-ident> или fixed <number>. Допускается также указать пользовательский <dashed-ident> вместе с ключевым словом element-shared, разделив их пробелом.

Ключевое слово element-shared

Все функции random() с ключевым словом element-shared используют одно и то же базовое случайное значение для одного свойства во всех элементах. Например, при объявлении следующего правила .a, .b и .c будут прямоугольниками одинакового размера: у всех трёх будет одинаковая случайная ширина и одинаковая, сгенерированная независимо, случайная высота:

.a,
.b,
.c {
  width: random(element-shared, 10px, 200px);
  height: random(element-shared, 10px, 200px);
}

Пользовательские имена

Если указать <dashed-ident> (например, --custom-name), каждый элемент в стилях которого используется имя с таким же значением, будет использовать то же базовое случайное значение; для элементов с разными значениями <dashed-ident> будут назначены разные базовые случайные значения. При объявлении следующего правила .a, .b и .c будут квадратами, поскольку в каждом элементе все свойства, ссылающиеся на один и тот же идентификатор, используют общее базовое значение. Поэтому ширина каждого элемента будет равна его высоте. Обратите внимание: в этом случае .a, .b и .c будут иметь разные размеры, поскольку базовое значение используется совместно свойствами одного элемента, а не разными элементами.

.a,
.b,
.c {
  width: random(--custom-name, 10px, 200px);
  height: random(--custom-name, 10px, 200px);
}

Одновременное указание <dashed-ident> и element-shared

Сочетание <dashed-ident> с element-shared (например, random(--custom-name element-shared, 0, 100)) позволяет использовать общее базовое случайное значение для элементов и свойств с одинаковым параметром <random-value-sharing>. При следующем объявлении .a, .b и .c будут квадратами одинакового размера:

.a,
.b,
.c {
  width: random(--custom-name element-shared, , 10px, 200px);
  height: random(--custom-name element-shared, 10px, 200px);
}

Автоматическое поведение

Если первый параметр опущен или явно задан как auto, идентификатор автоматически создаётся на основе имени и позиции свойства. Такое поведение может привести к неожиданному совместному использованию базового случайного значения.

.foo {
  width: random(100px, 200px);
}
.foo:hover {
  width: random(100px, 200px);
}
.bar {
  margin: random(1px, 100px) random(1px, 100px);
}
.bar:hover {
  margin: random(1px, 100px) random(1px, 100px) random(1px, 100px)
    random(1px, 100px);
}

Если для <random-value-sharing> используется значение по умолчанию или явно указано auto, пользовательский агент автоматически генерирует имя начального значения — идентификатор совместного использования сгенерированного значения — по единым правилам, основанным на имени и порядке свойств. Поэтому функции random() могут получить одинаковое имя начального значения и, следовательно, одно и то же базовое случайное значение. В этом примере идентификатор совместного использования сгенерированного значения для функции random() в значении свойства width одинаков для .foo и .foo:hover, поэтому при переходе между состояниями значение не изменится. Аналогично, первые две функции random() в обоих объявлениях margin имеют одинаковые идентификаторы совместного использования сгенерированного значения. Это означает, что первые два значения в сокращённой записи margin не изменятся при наведении указателя; при наведении верхний и правый отступы bar останутся прежними, а нижний и левый отступы получат независимые случайные значения. Чтобы получить независимое значение для каждой функции random(), укажите уникальный <dashed-ident>.

Пользовательские свойства

Как и во всех CSS-функциях, если функция random() включена в значение пользовательского свойства, значение остаётся функцией: оно работает как механизм подстановки текста, а не сохраняет одно возвращаемое значение.

--random-size: random(1px, 100px);

В этом примере пользовательское свойство --random-size не «сохраняет» сгенерированный случайный результат. При разборе var(--random-size) фактически заменяется на random(1px, 100px), то есть каждое использование создаёт новый вызов функции random() с собственным базовым значением, зависящим от контекста использования.

Это не относится к случаю использования random() при регистрации пользовательского свойства с помощью @property. Зарегистрированные пользовательские свойства вычисляют случайные значения и сохраняют их.

В этом примере, поскольку --defaultSize зарегистрировано, .a, .b и .c будут квадратами одинакового размера, но их цвета будут случайными, поскольку --random-angle не было зарегистрировано:

@property --defaultSize {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: random(100px, 200px);
}
:root {
  --random-angle: random(0deg, 360deg);
}
.a,
.b,
.c {
  background-color: hsl(var(--random-angle) 100% 50%);
  height: var(--defaultSize);
  width: var(--defaultSize);
}

Доступность

Поскольку random() может генерировать неизвестное значение в заданном диапазоне, вы не можете полностью контролировать результат. Это может привести к недоступным результатам. Например, если использовать random() для генерации цвета текста, в результате может получиться цвет с низкой контрастностью относительно фона. Важно учитывать контекст использования random() и проверять, чтобы результат всегда оставался доступным.

Формальный синтаксис

Примеры

Основы использования

В этом примере мы сгенерируем случайные цвета для круглых значков, чтобы показать основы использования функции random().

HTML

Добавим пять значков: один с классом desaturated и два с классом unique.

<div class="badge"></div>
<div class="badge"></div>
<div class="badge desaturated"></div>
<div class="badge unique"></div>
<div class="badge unique"></div>

CSS

Сделаем пять значков круглыми. Используем функцию random() внутри цветовой функции hsl(), чтобы задать <angle> для <hue>. Зададим element-shared, чтобы базовое случайное значение было общим для обычного badge и варианта desaturated, который будет менее насыщенной версией того же <hue>. Затем переопределим значки unique, чтобы их hue были действительно случайными, оставив параметр совместного использования базового значения по умолчанию — auto.

.badge {
  display: inline-block;
  width: 5em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: hsl(random(element-shared, 0, 360) 50% 50%);
}
.badge.desaturated {
  background: hsl(random(element-shared, 0, 360) 10% 50%);
}
.badge.unique {
  background: hsl(random(0, 360) 50% 50%);
}

@supports not (order: random(1, 2)) {
  body::before {
    content: "Your browser doesn't support the random() function.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Совместное использование случайных значений свойствами

В этом примере мы создадим звёздный фон, чтобы показать, как с помощью <dashed-ident> использовать общее начальное значение для свойств одного элемента.

HTML

Добавим пять частиц с одним и тем же именем класса.

<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>

CSS

Для всех частиц заданы одинаковые стили. Используем функцию random() для значений height, width, top и left, чтобы случайным образом задать размер и положение каждой частицы. В качестве базового значения для height и width используем <dashed-ident>. Это означает, что размеры частиц не зависят друг от друга и выбираются в заданном диапазоне, но значение height каждой частицы будет таким же, как значение её width. Для свойств top и left зададим базовое значение auto, чтобы базовые значения для каждого свойства и элемента были независимы друг от друга.

body {
  background: black;
}

.particle {
  border-radius: 50%;
  background: white;
  position: fixed;
  width: random(--particle-size, 0.25em, 1em);
  height: random(--particle-size, 0.25em, 1em);
  top: random(0%, 100%);
  left: random(0%, 100%);
  animation: move 1s alternate-reverse infinite;
}

@supports not (order: random(1, 2)) {
  body::before {
    content: "Your browser doesn't support the random() function.";
    color: white;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• calc()
• Модуль единиц измерения и значений CSS
• Math.random()
• Бросаем кости с помощью CSS random() на webkit.org (2025)
• CSS Almanac: random() на CSS-Tricks.com