Nintendo Gaming Consoles in Pure CSS

CSS Open Source This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

CSS has come to the point where developers can build graphics right in a web browser. These can be made with polygons and DIVs or even SVGs.

This gallery features real Nintendo console graphics from classic NES to Gamecube. Each one is free to view on CodePen including the source code. I’ve also covered Pokémon CSS graphics made with similar code snippets.

If you’re a fan of Nintendo or just love crazy CSS techniques, this collection is guaranteed to satiate.

Classic NES Controller

SNES Controller

Flat SNES

Purple Gameboy Color

GBA SP Classic

Nintendo DS Lite

Rotating N64 Logo

Gamecube Intro Animation

Nintendo 3DS XL

Original Gameboy

SVG Gameboy Animation


Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.