The CSS random() Function

Everyone knows about CSS variables, but have you heard about the CSS random() function? It's an experimental feature that basically gives you Math.random() directly in your stylesheets. No JS needed!

Loading browser compatibility data...

What does it do?

The random() function generates random values between a specified range:

.element {
  top: random(5rem, 20rem);
  left: random(10px, 200px);
}

In this example, every time you refresh the page, elements get positioned randomly. This was possible before, but not without some JS help.

Basic Syntax

The simplest form takes a min and max value:

.element {
  font-size: random(1rem, 3rem); /* Random size between 1-3rem */
  opacity: random(0.3, 1.0);     /* Random opacity */
}

Per-Element Randomness

By default, all elements share the same random value. Want unique values for each element? Use --per-element:

.cards {
  /* Each card gets its own random position */
  top: random(--per-element, 0px, 100px);
}

Step-Based Random

You can also generate values in specific steps:

.element {
  /* Only 10px, 20px, 30px, 40px, 50px */
  margin: random(10px, 50px, by 10px);
}

Important Rules

Unit Consistency: All values must use the same units

/* ✅ Good */
.good { padding: random(1rem, 5rem); }

/* ❌ Bad - mixing units */
.bad { padding: random(10px, 5rem); }

Fresh on Reload: Values change every time you refresh the page. They don't persist.

CSS vs SCSS random()

If you've used SCSS, the CSS version is different:

SCSS

Only takes upper limit: random(100) = 1-100
Generates at compile time
No step function

CSS

Takes min/max: random(10px, 100px)
Generates at page load
Has step functions

Creative Ideas

Magazine-style layouts:

.article {
  transform: rotate(random(--per-element, -5deg, 5deg));
  top: random(--per-element, -20px, 20px);
}

Random animation delays:

.fade-in {
  animation-delay: random(--per-element, 0s, 2s);
}

Browser Support

You can actually try this today in Safari Technology Preview! It's the first browser to implement it.

Other browsers? Zero support yet. But Safari Tech Preview lets you experiment with it right now.

What can you do now?

If you have Safari Technology Preview, go wild! Try the real thing.

For everyone else, you can fake it with JavaScript:

// Set random CSS variables
document.querySelectorAll('.random-item').forEach(el => {
  el.style.setProperty('--random-x', Math.random() * 100 + '%');
});

.random-item {
  left: var(--random-x);
}

Or if you're using Vue.js, you can bind random values directly with v-bind:

<script setup>
const items = ref([
  { id: 1, content: 'Card 1' },
  { id: 2, content: 'Card 2' },
  { id: 3, content: 'Card 3' }
])

const randomRotate = () => Math.random() * 20 - 10
const randomPercent = () => Math.random() * 100
</script>

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    class="random-card"
  >
    {{ item.content }}
  </div>
</template>

<style scoped>
.random-card {
  position: absolute;
  top: v-bind('randomPercent() + "%"');
  left: v-bind('randomPercent() + "%"');
  transform: rotate(v-bind('randomRotate() + "deg"'));
}
</style>

Or use SCSS if you're into that:

@for $i from 1 through 5 {
  .item:nth-child(#{$i}) {
    top: random(200) + px;
  }
}

Conclusion

The CSS random() function is here! Well, in Safari Tech Preview at least. It's already showing huge promise for creating unique, dynamic layouts without JavaScript.

Give it a try if you can, and let's see what creative things the web community builds with it!

Have you tried creating random layouts with CSS or SCSS? Let me know what you built!

References:

The CSS random() function

Sandeep Ramgolam