Fizz Buzz using Modern CSS (no HTML) 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

Fizz Buzz using Modern CSS (no HTML)

A fun experiment using modern CSS to create the classic Fizz Buzz

Is it possible to create a Fizz Buzz using HTML and CSS? Yes, but what about a pure CSS version, with no HTML at all? It's doable using modern features. We can even simulate a kind of slider that shows four entries at a time.

html {
  --N: 1000; /* the maximum number */
}
:is(html, body):before,
:is(html, body):after {
  counter-reset: n var(--n);
  animation: --n calc(var(--N) * 1s) linear both;
  --x: sign(mod(var(--n), 3)); /* 0 if divisible by 3 (1 otherwise) */
  --y: sign(mod(var(--n), 5)); /* 0 if divisible by 5 (1 otherwise) */
  content: if(
    style((--x: 0) and (--y: 0)): "FizzBuzz" ; /* divisible by 3 and 5 */
      style((--x: 0) and (--y: 1)): "Fizz" ; /* divisible by 3 and not 5 */
      style((--x: 1) and (--y: 0)): "Buzz" ; /* divisible by 5 and not 3 */ else:
      counter(n) ;
  );
}
@keyframes --n {to {--n: var(--N);}}
body:before {animation-delay: -1s;}
body:after {animation-delay: -2s;}
html:after {animation-delay: -3s;}

⚠️

A Chrome-only experiment for now

See CSS-only Fizz Buzz (no HTML) by t_afif on CodePen.

We can get fancier with an animated version!

See CSS-only animated Fizz Buzz (no HTML) by t_afif on CodePen.

Inspired by "Fizz Buzz"

Fizz Buzz in CSS - Susam Pal

---

How many CSS selectors and declarations do we need to produce the Fizz Buzz sequence? Of course we could do this with no CSS at all simply by placing the entire sequence as text in the HTML body. So to make the problem precise as well as to keep it interesting, we require that all text that appears in the Fizz Buzz sequence comes directly from the CSS. Placing any part of the output numbers or words outside the stylesheet is not allowed. JavaScript is not allowed either. With these constraints, I think we need at least four CSS selectors along with four declarations to solve this puzzle, as shown below

---

More CSS Tips

• Gallery of Skewed Images with Hover Effect Using modern CSS and corner-shape to add a fancy gallery of images with a reveal hover effect. December 02, 2025
• Direction-Aware CSS Shapes A few lines of code to make any CSS shape adjust according to the direction of the text. November 27, 2025

Fizz Buzz using Modern CSS (no HTML)

---

A fun experiment using modern CSS to create the classic Fizz Buzz