30+ CSS Pixel Art

Are you looking to add old-school pixel art to your web project? Your search ends here! In this collection, we are demonstrating 30+ HTML and CSS pixel art code examples that give your audience a playful or whimisical feel. We’ve curated this compilation from top platforms like Codepen and GitHub, allowing you to build modern web design with vibrant colour imagery and animation.

Whether you’re looking to create minimalist and retro designs, playful branding, or captivating pixel art, we have something to offer everyone. Each item in our compilation is carefully chosen, following the modern web design trend, perfect for web designers and UI developers with easy customisation options.

Explore our collection of hand-picked CSS pixel art designs and get your creativity flowing!

1. Pure CSS The Carlton dance

Author: Grzegorz Witczak
Source: Code / Demo
Created on: AUGUST 14, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. Star Wars BB-8 : Pure CSS Animation, Single Div, 8Bit

See the Pen <a href="https://codepen.io/udithishara/pen/obaLdg"> Star Wars BB-8 : Pure CSS Animation, Single Div, 8Bit</a> by Udith Ishara Madusanka (<a href="https://codepen.io/udithishara">@udithishara</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Udith Ishara Madusanka
Source: Code / Demo
Created on: FEBRUARY 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

3. Walking Sprites Demo

See the Pen <a href="https://codepen.io/punkydrewster713/pen/YooJJj"> Walking Sprites Demo</a> by Drew Conley (<a href="https://codepen.io/punkydrewster713">@punkydrewster713</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Drew Conley
Source: Code / Demo
Created on: JULY 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. CSS Pixel Art: Link – LoZ: LttP

See the Pen <a href="https://codepen.io/rpdasilva/pen/nxZvGR"> CSS Pixel Art: Link – LoZ: LttP</a> by Philip Da Silva (<a href="https://codepen.io/rpdasilva">@rpdasilva</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Philip Da Silva
Source: Code / Demo
Created on: FEBRUARY 26, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Kiki’s Delivery Service – Pure CSS

See the Pen <a href="https://codepen.io/kkdawg/pen/OXPrKe"> Kiki’s Delivery Service – Pure CSS</a> by Kirsten Rauffer (<a href="https://codepen.io/kkdawg">@kkdawg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kirsten Rauffer
Source: Code / Demo
Created on: JUNE 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Steve Jobs

See the Pen <a href="https://codepen.io/zerospree/pen/GRgoGx"> Steve Jobs</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: MARCH 10, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Sonic The Hedgehog

See the Pen <a href="https://codepen.io/zessx/pen/nyVwvX"> Sonic The Hedgehog</a> by zessx (<a href="https://codepen.io/zessx">@zessx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: zessx
Source: Code / Demo
Created on: MAY 3, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. one div film – divtober #27 2021

See the Pen <a href="https://codepen.io/t_afif/pen/OJjmqZM"> one div film – divtober #27 2021</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani atif
Source: Code / Demo
Created on: OCTOBER 27, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Pirate pixel art css

See the Pen <a href="https://codepen.io/oxla/pen/MwxvjP"> Pirate pixel art css</a> by Alex Konstantinov (<a href="https://codepen.io/oxla">@oxla</a>) on <a href="https://codepen.io">CodePen</a>. Author: Alex Konstantinov
Source: Code / Demo
Created on: AUGUST 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Gordon Freeman Pixel Art

Author: Sergey
Source: Code / Demo
Created on: APRIL 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Pure CSS Apple Logo

See the Pen <a href="https://codepen.io/zerospree/pen/LYGdJr"> Pure CSS Apple Logo</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: APRIL 8, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Window Pixel Dog

See the Pen <a href="https://codepen.io/pokecoder/pen/vYZwWja"> Window Pixel Dog</a> by Ale (<a href="https://codepen.io/pokecoder">@pokecoder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ale
Source: Code / Demo
Created on: OCTOBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. 3D Pixels

See the Pen <a href="https://codepen.io/shshaw/pen/qqgZjQ"> 👾 3D Pixels 👾</a> by Shaw (<a href="https://codepen.io/shshaw">@shshaw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaw
Source: Code / Demo
Created on: DECEMBER 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

14. Han Solo and Chewbacca Pixel Art

See the Pen <a href="https://codepen.io/black_c/pen/mmbNex"> Han Solo and Chewbacca Pixel Art</a> by Sergey (<a href="https://codepen.io/black_c">@black_c</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sergey
Source: Code / Demo
Created on: APRIL 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Pulp Fiction CSS Pixel Art

See the Pen <a href="https://codepen.io/katiaeirin/pen/ogbZBY"> Pulp Fiction CSS Pixel Art</a> by Katia Shatoba (<a href="https://codepen.io/katiaeirin">@katiaeirin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Katia Shatoba
Source: Code / Demo
Created on: DECEMBER 7, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

16. Hunter from Destiny in Pure CSS [8-Bit]

See the Pen <a href="https://codepen.io/AndrewKiproff/pen/QjOgrW"> Hunter from Destiny in Pure CSS [8-Bit]</a> by Andrew Kiproff (<a href="https://codepen.io/AndrewKiproff">@AndrewKiproff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew Kiproff
Source: Code / Demo
Created on: OCTOBER 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Pixel art Bulbasaur

See the Pen <a href="https://codepen.io/zerospree/pen/OJMxpQ"> Pixel art Bulbasaur</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: APRIL 7, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Single element animated CSS3 T-Rex

See the Pen <a href="https://codepen.io/zerospree/pen/DyWOqw"> Single element animated CSS3 T-Rex</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: JANUARY 22, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Zero Divs! Pure CSS pixel art animation!

See the Pen <a href="https://codepen.io/ivorjetski/pen/xxKBWBN"> Zero Divs! Pure CSS pixel art animation! #nodivember</a> by Ben Evans (<a href="https://codepen.io/ivorjetski">@ivorjetski</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ben Evans
Source: Code / Demo
Created on: SEPTEMBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Pokémon Blue/Red CSS Edition Opening

See the Pen <a href="https://codepen.io/kai/pen/eWPwzJ"> Pokémon Blue/Red CSS Edition Opening</a> by Kai Brueckers (<a href="https://codepen.io/kai">@kai</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kai Brueckers
Source: Code / Demo
Created on: MAY 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

21. Pulsing (he)art

See the Pen <a href="https://codepen.io/zerospree/pen/Vwvqbw"> Pulsing (he)art</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: APRIL 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Bat Pixel Art Animation on one Div

See the Pen <a href="https://codepen.io/timothyguo/pen/jbarzP"> Bat Pixel Art Animation on one Div</a> by Yuxin Guo (<a href="https://codepen.io/timothyguo">@timothyguo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuxin Guo
Source: Code / Demo
Created on: OCTOBER 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Pixel Art Hellboy

See the Pen <a href="https://codepen.io/zerospree/pen/LYpxWB"> Pixel Art Hellboy</a> by Codrin Pavel (<a href="https://codepen.io/zerospree">@zerospree</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codrin Pavel
Source: Code / Demo
Created on: MARCH 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Pixel Art Moonset

See the Pen <a href="https://codepen.io/pavlovsk/pen/gQeXjw"> Pixel Art Moonset</a> by Mustafa Enes (<a href="https://codepen.io/pavlovsk">@pavlovsk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mustafa Enes
Source: Code / Demo
Created on: NOVEMBER 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

25. Back to the Future Pixel Art

See the Pen <a href="https://codepen.io/black_c/pen/NjWEyy"> Back to the Future Pixel Art</a> by Sergey (<a href="https://codepen.io/black_c">@black_c</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sergey
Source: Code / Demo
Created on: APRIL 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Single Element Pixel-Art Mixin

See the Pen <a href="https://codepen.io/roborich/pen/nyvPqP"> Single Element Pixel-Art Mixin</a> by Rich Howell (<a href="https://codepen.io/roborich">@roborich</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rich Howell
Source: Code / Demo
Created on: SEPTEMBER 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

27. Pumpkin Animation on one Div

See the Pen <a href="https://codepen.io/timothyguo/pen/RWLvgV"> Pumpkin Animation on one Div</a> by Yuxin Guo (<a href="https://codepen.io/timothyguo">@timothyguo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuxin Guo
Source: Code / Demo
Created on: OCTOBER 16, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Songoku

See the Pen <a href="https://codepen.io/appai/pen/RwgVNZ"> Songoku </a> by Akbar Putra (<a href="https://codepen.io/appai">@appai</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Akbar Putra
Source: Code / Demo
Created on: JUNE 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Single element “8-bit” Fight Club Animation

See the Pen <a href="https://codepen.io/monstersaurous/pen/wvwaPz"> Single element “8-bit” Fight Club Animation</a> by Albert Filice (<a href="https://codepen.io/monstersaurous">@monstersaurous</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Albert Filice
Source: Code / Demo
Created on: FEBRUARY 20, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. CSS Conf EU 2017 High Five Game!

See the Pen <a href="https://codepen.io/una/pen/RVZvOy"> CSS Conf EU 2017 High Five Game!</a> by Una Kravets (<a href="https://codepen.io/una">@una</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Una Kravets
Source: Code / Demo
Created on: MAY 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)