Does the CSS random() function work in email? 

CSS can now generate a random number on its own, no JavaScript required. The random() function picks a value within a range you define, and it opens up small moments of surprise that used to be impossible in an inbox: a different result every time someone opens your email.

It's early, and support is narrow, so this is firmly in progressive-enhancement territory. But the reach includes the latest Apple Mail, and the amount of code involved is tiny.

random() works in the latest Apple Mail because that's built on WebKit, where the function shipped first, but its overall reach in email is small today. Use it as a fun progressive enhancement, an easter egg on top of an email that already works, rather than as a core mechanic.

• The random() function generates a random value within a range, following the pattern random(min, max, step).
• WebKit was the first engine to ship it, in Safari 26.2, so it works in the latest versions of Apple Mail.
• It's not Baseline yet and isn't in widely used engines beyond WebKit, so it needs a fallback and a progressive-enhancement approach.
• A random email can be built with a single CSS line and a background image, coming in at around one kilobyte total.
• You can't easily react to the random result, such as showing a winning screen when values line up, because style queries don't read the computed value.

It returns a random value within a range you specify, using the pattern random(min, max, step). You set a minimum and a maximum to define the range, and an optional step to control the interval, so random(0, 100, 2) returns an even number between 0 and 100. Every value type works, as long as all the arguments match, so you can randomise a length, an angle, a percentage, or a plain number.

The MDN example shows the range of it well: a single div with a random height, width, background color, and rotation, all driven by random(). WebKit was the first engine to ship the function, in Safari 26.2, which is what brings it into email through Apple Mail.

You point a background image at a set of options and let random() choose the position. To demonstrate it, I built a small fruit machine that lands on a random result each time you open the email. The whole thing runs on one line of meaningful CSS.

The setup is a background image containing six email logos stacked vertically, with random() choosing the vertical background position between 1em and 6em, stepping by 1em so it lands cleanly on one logo:

Each reel draws its own value, so they land independently. The complete email came in at a little over one kilobyte, which is small for something that feels interactive. Most of the effect comes from that one line doing the work.

Not easily. The obvious next step is to show a winning screen when all the reels match, and the natural tool for that would be style queries. But style queries don't look at the computed value, which is what you'd need to compare the random results, so they can't respond to what random() produced.

There's a possible workaround using calc() and overflow to force a condition, similar to the Fab Four technique Rémi Parmentier created for responsive emails without media queries. It's more involved, so for most uses the random result stands on its own without a reaction to it.

Only WebKit-based clients today, which in practice means the latest versions of Apple Mail. Because WebKit shipped the function first, Apple Mail on up-to-date devices renders it. Older devices miss out: an iPhone that can't run the latest iOS won't get it, so an iPhone that's a few generations old won't show the effect.

It may also work in some webmail if opened in Safari, but that's a narrow path. Chromium supports it behind an experimental flag, which isn't something you can rely on for subscribers. So the reach is real but small, and centered on current Apple Mail.

As a fun progressive enhancement, yes. It doesn't use much code, it's quick to add, and it's self-explanatory once you understand the random() formatting. If you're already building something playful, dropping in this kind of easter egg is a nice touch for the subscribers whose clients support it.

The key is that it degrades gracefully. Clients that don't support random() fall back to whatever your default background position is, so nobody sees a broken email. Build the email so it works without the effect, then add random() on top for the clients that can render it.

What is the CSS random() function? It's a CSS function that generates a random value within a range, using the pattern random(min, max, step). It works with lengths, angles, percentages, and numbers, as long as all the arguments share the same type, and it produces the value without any JavaScript.

Does random() work in Apple Mail? Yes, in the latest versions. Apple Mail is built on WebKit, and WebKit was the first engine to ship random(), in Safari 26.2. Older devices that can't run the current version won't support it.

Can I make something happen when the random values match? Not directly. You'd want to compare the computed values, but style queries don't read the computed value, so they can't react to what random() produced. A calc() and overflow workaround is possible but involved.

What happens in clients that don't support random()? The element falls back to its default value, such as a fixed background position, so the email still renders correctly. That graceful fallback is why random() suits a progressive-enhancement approach.

Is CSS random() safe to use in production email? It's safe as an enhancement, not as a core mechanic. It isn't Baseline and only WebKit-based clients support it, so build your email to work without it and treat the random effect as a bonus for clients that can show it.

Mark experiments with the newest CSS features in real inboxes on the Mr. Email Dev channel, so you can see what's possible before it's mainstream. Subscribe on YouTube for each new test.