Introduction

When CSS Grid introduced the repeat() function, it simplified defining repetitive column and row patterns. However, many developers wished for a generic version of this function that could work in any CSS context—not just grid layouts. The desire to repeat any value N times without manual repetition has long been a gap in CSS. But one developer decided to fill that gap by creating a custom --repeat() function using pure CSS custom properties and clever binary arithmetic.

Building a Generic CSS Repeat Function Using Binary Decomposition — Source: dev.to

The Inspiration Behind the CSS `--repeat()` Function

Web developer Wes Bos recently expressed a wish on BlueSky for a generic repeat function, particularly for repeating segments inside shape definitions. The author responded with enthusiastic support, and soon after, Noam Rosenthal (noamr) opened an issue with the W3C CSS Working Group to formally propose making repeat() generic across CSS. While waiting for official implementation, inspiration struck the author, leading to an immediate prototype built on CodePen—using nothing but a phone. The result is a fully functional --repeat() custom function that demonstrates how CSS can be pushed beyond its typical boundaries.

How the CSS `--repeat()` Function Works

Core Concept: Converting to Unary via Binary

At its heart, any non-iterative repeat() function essentially converts the count parameter into a unary representation, using the repeated item as the symbol for “1”. For example, --repeat(4, 1) yields 1111. To achieve this in CSS—which lacks loops—the author used binary decomposition. The number N is first broken down into its binary bits, then each bit contributes a corresponding power-of-two repetition of the item. The result is assembled by concatenating contributions from bits that are 1, while ignoring bits that are 0.

Binary Decomposition in CSS

The function extracts each bit of N using integer division and modulo with powers of two. It starts with the most significant bit (128) and works down to the least significant bit (1). For each bit position from 7 down to 0, it calculates whether that bit is set. For example, to get bit 7 (value 128): --bit7: calc(round(down, var(--n) / 128));. The remainder after removing that bit’s contribution becomes the new value for further decomposition. This process continues until all eight bits are computed.

Unary Assembly Using Powers of Two

Once the bits are known, the function precomputes repeated concatenations of the input value x for powers of two: --pow1 is x twice, --pow2 is that repeated (effectively four x), and so on up to --pow7 (128 repetitions). Then, using CSS conditional rules (via the if() function in newer CSS, or @supports and style queries), it appends --pow0 through --pow7 only for those bits whose value is 1. This effectively sums the contributions, producing the final unary string of exactly N copies of the input. The function declaration looks like this:

@function --repeat(--n, --x) {
  --bit7: calc(round(down, var(--n) / 128));
  /* ... more bits ... */
  result: if(style(--bit0 = 1): var(--pow0); else: ;)
    if(style(--bit1 = 1): var(--pow1); else: ;)
    /* ... */
    if(style(--bit7 = 1): var(--pow7); else: ;);
}

Practical Implementation and Usage

The function can be used wherever repeated CSS values are needed—for example, generating multiple background layers, shadows, or even shape segments. The original CodePen demonstrates it working with integer counts up to 255, but the technique can be extended to larger numbers by adding more bit positions. The approach is entirely CSS-native, requiring no preprocessors or JavaScript. It represents a clever workaround for a long-standing limitation, and a proof of concept that the CSS Working Group’s official proposal might one day fulfil.

Conclusion

The CSS --repeat() function is a brilliant example of how creative thinking can bridge the gap between community desire and official specification. By decomposing numbers into binary and reassembling them as unary repetitions, the author has created a generic repeat that works anywhere in CSS. While we await native support for a repeat() function outside of Grid, this custom function provides immediate utility and a spark for further discussion in the CSS community. For those eager to experiment, the full code is available and ready to be adapted.

Building a Generic CSS Repeat Function Using Binary Decomposition