CSS random() Function

CSS random() Function

The CSS random() function generates a random numeric value between a specified minimum and maximum.

It supports numbers, lengths, percentages, angles, and other compatible numeric types. An optional step interval limits the possible results, while an optional random key controls whether generated values are shared or vary between elements and properties.

Syntax

random(minimum, maximum)
random(minimum, maximum, step)
random(random-key, minimum, maximum)
random(random-key, minimum, maximum, step)

The minimum and maximum arguments are required. The random key and step interval are optional.

For example:

width: random(100px, 300px);
margin-top: random(10px, 50px, 5px);
rotate: random(0deg, 360deg);
opacity: random(0, 1);
width: random(element-scoped, 100px, 300px);

The function returns a numeric value of the same type as its range arguments.

The generated result is selected from the specified range rather than calculated as a fixed midpoint or average.

Parameters

The random() function accepts two required arguments and up to two optional arguments.

For example:

random(10px, 100px, 10px)

This can return 10px, 20px, 30px, and so on through 100px.

All range arguments must resolve to compatible numeric types. A length cannot be mixed with a unitless number as an unrelated range endpoint.

If the maximum is smaller than the minimum, the function returns the minimum.

How It Works

The random() function selects a value from a defined numeric range.

For example:

.box {
  width: random(100px, 300px);
}

A supporting browser might calculate a width of 142px, 215px, or another value between 100px and 300px.

The exact result is not predetermined by the stylesheet.

By default, the function uses an automatically generated random key. Different elements and properties can receive different results.

However, the value is not necessarily recalculated whenever an element is repainted, hovered, or otherwise updated.

CSS maintains random values according to their associated keys, allowing the same random result to be reused consistently.

The function is intended for visual variation, not for secure random-number generation.

Supported Numeric Types

The random() function can return several CSS numeric types.

For example:

.box {
  width: random(100px, 250px);
  rotate: random(-15deg, 15deg);
  opacity: random(0.5, 1);
}

Each declaration generates a value appropriate for its receiving property.

For properties requiring integers, the calculated result follows the property's integer conversion rules.

Step Intervals

The optional third numeric argument restricts results to specific intervals.

For example:

random(0, 100, 20)

Possible results are 0, 20, 40, 60, 80, and 100.

Another example:

random(100px, 300px, 50px)

Possible results are 100px, 150px, 200px, 250px, and 300px.

The step is measured from the minimum value.

If the maximum does not align with a step, the last possible result is the greatest stepped value that does not exceed the maximum.

For example:

random(0px, 95px, 20px)

Possible results are 0px, 20px, 40px, 60px, and 80px.

Step intervals are useful for generating consistent spacing increments, rotation angles, and discrete size variations.

Random Keys

The optional random key controls which generated values are independent and which share the same random base value.

For example:

width: random(auto, 100px, 200px);
width: random(element-scoped, 100px, 200px);
width: random(property-scoped, 100px, 200px);
width: random(--box-size, 100px, 200px);
width: random(fixed 0.5, 100px, 200px);

Random keys are especially useful when multiple elements or CSS properties need coordinated values.

For predictable results, choose a key based on whether values should vary independently or be shared.

Value Sharing

Named random keys can coordinate values across multiple properties.

For example:

.square {
  width: random(--square-size element-scoped, 60px, 140px);
  height: random(--square-size element-scoped, 60px, 140px);
}

Both properties use the same named random base value and the same range.

As a result, the width and height match, producing a square.

The element-scoped keyword allows different elements to receive different square sizes.

Without a shared key, the width and height could be calculated independently, producing rectangles.

Named keys can also be used without an element scope:

.square {
  width: random(--shared-size, 60px, 140px);
  height: random(--shared-size, 60px, 140px);
}

In this case, elements using the same key and range can share the same generated dimensions.

Sharing a random base value does not mean that different numeric ranges always return identical numeric results.

Fixed Random Values

The fixed keyword provides a specific random base value rather than relying on a generated one.

For example:

width: random(fixed 0.5, 100px, 300px);

The fixed value determines the position used to select a result within the specified range.

Another example:

width: random(fixed 0.25, 100px, 300px);

The supplied fixed number must be at least 0 and less than 1.

Fixed random values are useful for reproducible examples and testing.

They do not generate a new random base value on each evaluation.

Custom Properties

CSS custom properties can be used to define the range supplied to random().

For example:

.box {
  --minimum-size: 100px;
  --maximum-size: 250px;
  width: random(var(--minimum-size), var(--maximum-size));
}

The custom properties provide the minimum and maximum values.

A complete random function can also be stored as an unregistered custom property:

.box {
  --random-width: random(100px, 250px);
  width: var(--random-width);
}

An unregistered custom property stores the function expression rather than a single precomputed random number.

When the variable is substituted into different properties, the random function is evaluated according to the key and scope used at each destination.

Use a named random key when multiple declarations need coordinated results.

Random Colors

The random() function can generate numerical components for CSS color functions.

For example:

.box {
  background-color: hsl(random(0, 360) 70% 50%);
}

The function generates a hue value between 0 and 360, producing different possible colors.

For a controlled selection of hues, use a step interval:

.box {
  background-color: hsl(random(0, 330, 30) 70% 50%);
}

This limits the hue to 30-degree increments.

A named or scoped random key can be used when related elements need coordinated colors.

When random colors are used with text, ensure that every possible color maintains sufficient contrast for readability.

Example

This example uses random() to generate different widths and rotation angles for decorative boxes.

HTML:

<div class="random-demo">
  <div class="random-demo-box">Box 1</div>
  <div class="random-demo-box">Box 2</div>
  <div class="random-demo-box">Box 3</div>
  <div class="random-demo-box">Box 4</div>
</div>

CSS:

.random-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 25px;
  background-color: #f1f3f5;
}
.random-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  width: random(100px, 220px);
  height: 55px;
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
  transform: rotate(0deg);
  transform: rotate(random(-5deg, 5deg));
}

In supporting browsers, each box can receive a different width and rotation angle.

The width remains between 100px and 220px, while the rotation remains between -5 and 5 degrees.

Browsers without random() support display boxes with the fallback width and rotation.

Spacing Example

This example generates decorative spacing values using fixed increments.

HTML:

<div class="random-spacing-demo">
  <div class="random-spacing-item">Item 1</div>
  <div class="random-spacing-item">Item 2</div>
  <div class="random-spacing-item">Item 3</div>
</div>

CSS:

.random-spacing-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.random-spacing-item {
  width: 130px;
  padding: 12px;
  margin: 0 0 10px;
  margin-left: random(0px, 60px, 10px);
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
}

In supporting browsers, each item can receive a left margin of 0px, 10px, 20px, 30px, 40px, 50px, or 60px.

The step interval ensures that the offsets use consistent 10-pixel increments.

In unsupported browsers, the items retain the default left margin of zero.

Common Uses

The random() function is useful for adding controlled visual variation to CSS designs.

For example:

.decorative-box {
  width: random(100px, 200px);
  rotate: random(-10deg, 10deg);
}
.animated-item {
  animation-delay: random(0s, 2s);
}
.color-block {
  background-color: hsl(random(0, 360) 65% 50%);
}

Random values should be used where variation improves the presentation without interfering with usability.

Limitations

The random() function has several important rules and limitations.

• It requires minimum and maximum numeric values.
• Range arguments and the optional step must have compatible numeric types.
• The result must be valid for the CSS property receiving it.
• It does not guarantee a new result every time an element is repainted or hovered.
• Random keys determine whether values are shared or independent.
• Generated results are not suitable for cryptographic or security-sensitive purposes.
• Random dimensions can cause overflow or inconsistent layouts.
• Random colors can produce insufficient text contrast.
• Browser support is limited and may differ between implementations.
• Fallback declarations are recommended for essential styling.

For example, this is valid:

width: random(100px, 300px);

The following is invalid because the range values have incompatible numeric types:

width: random(100px, 300deg);

The following is invalid because a maximum value is missing:

width: random(100px);

For reliable layouts, keep generated values within carefully chosen limits and provide suitable fallbacks.

Browser Support

The CSS random() function has Limited availability and is not Baseline across all major browsers.

It is a newer CSS mathematical function, and support for random keys and other advanced features may vary between browser implementations.

For example:

.box {
  width: 150px;
  width: random(100px, 250px);
}

Browsers that support random() generate a width within the specified range. Unsupported browsers retain the preceding valid width declaration.

Feature detection can also be used:

@supports (width: random(100px, 250px)) {
  .box {
    width: random(100px, 250px);
  }
}

The @supports rule checks whether the browser accepts the specified declaration.

For current compatibility information, visit Can I Use? and search for CSS random().

Specifications

The random() function is defined in the CSS Values and Units Module Level 5 .

The specification defines random numeric values, step intervals, random keys, and the rules for sharing generated values.

Related CSS functions include random-item(), calc(), min(), max(), and clamp().