30+ CSS Pixel Art

Free 30+ HTML and CSS pixel art code examples that give your audience a playful or whimsical feel.

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)