Super Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)

In this post, I’ll be brief. Allow me to get straight to the point.

This GIF on the left shows a short Super Mario World animation made purely with CSS. No embedded or external images were used. No JavaScript too. Only CSS (with Stylus as preprocessor) and this tiny HTML:

<main class="game">
<div class="game__background"></div>
<div class="game__foreground">
<div class="foreground__mario"></div>
<div class="foreground__ground"></div>

For comparison purposes, this is the original Super Mario World, for Super Nintendo:

Disclaimer: Super Mario World.css is not a playable game, it’s “just” an animation.

If you’re curious to know how it was made, the code is well commented.

Basically, 99.99% of what you’ll see is made with CSS gradients, including the forest, bushes and Mario himself.

It works fine in Chrome 64 on MacOS. Firefox runs it properly too, but a bit slowly. In Safari, unfortunately, it simply doesn’t work at all, and I’m out of patience and time to debug it for now. I didn’t test it with other browsers or devices.

And here’s the pen:

Update. New experiment released!: Hey, after seeing this post, you may want to take a look at my new experiment here.


This is how the sprite data looks in Atom, by using the atom-pigments package. =)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store