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

Alcides Queiroz
Mar 20, 2018 · 2 min read
It’s me, Mario!

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:

The original game

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:

Super Mario World.css

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. =)

Alcides Queiroz

Written by

JavaScript hacker, front-end engineer and F/OSS lover. ☞ ☜ ☞ ☜ ☞ ☜

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade