Collection of hand-picked free HTML and CSS pixel art code examples from Codepen and other resources.

Demo image: One Div Film

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

One Div Film

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Window Pixel Dog

Author

  • Ale

Made with

  • HTML / CSS

About a code

Window Pixel Dog

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Zero Divs! Pure CSS Pixel Art Animation

Author

  • Ben Evans

Made with

  • HTML / CSS (SCSS)

About a code

Zero Divs! Pure CSS Pixel Art Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Back to the Future Pixel Art

Author

  • Sergey

Made with

  • HTML / CSS

About a code

Back to the Future Pixel Art

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Han Solo and Chewbacca Pixel Art

Author

  • Sergey

Made with

  • HTML / CSS

About a code

Han Solo and Chewbacca Pixel Art

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Gordon Freeman Pixel Art

Author

  • Sergey

Made with

  • HTML / CSS

About a code

Gordon Freeman Pixel Art

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Kiki's Delivery Service

Author

  • Kirsten Rauffer

Made with

  • HTML / CSS

About a code

Kiki's Delivery Service

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Star Wars BB-8

Author

  • Udith Ishara Madusanka

Made with

  • HTML / CSS (Less)

About a code

Star Wars BB-8

Pure CSS animation, single div, 8bit.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Hunter from Destiny in Pure CSS [8-Bit]

Author

  • Andrew Kiproff

Made with

  • HTML / CSS

About a code

Hunter from Destiny in Pure CSS [8-Bit]

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Bat Pixel Art Animation on One Div

Author

  • Tim Guo

Made with

  • HTML / CSS (SCSS)

About a code

Bat Pixel Art Animation on One Div

Another pixel art experiment using CSS box-shadow. Modify the SCSS variables to change the color, size and the speed of the animation if you want. Using box-shadow hack to create a pixel art in production environment is a terrible idea. Please use a GIF image, data URI, or SVG whenever possible.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pumpkin Animation on One Div

Author

  • Tim Guo

Made with

  • HTML / CSS (SCSS)

About a code

Pumpkin Animation on One Div

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pirate Pixel Art CSS

Author

  • Alex Konstantinov

Made with

  • HTML / CSS

About a code

Pirate Pixel Art CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pulp Fiction CSS Pixel Art

Author

  • Katia Shatoba

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Pulp Fiction CSS Pixel Art

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: Pure CSS Apple Logo

Author

  • Codrin Pavel

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Apple Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pixel Art Bulbasaur

Author

  • Codrin Pavel

Made with

  • HTML / CSS (SCSS)

About a code

Pixel Art Bulbasaur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pulsing (He)Art

Author

  • Codrin Pavel

Made with

  • HTML / CSS (SCSS)

About a code

Pulsing (He)Art

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pixel Art Hellboy

Author

  • Codrin Pavel

Made with

  • HTML / CSS (SCSS)

About a code

Pixel Art Hellboy

One element, pure CSS, scalable pixel art Hellboy.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Steve Jobs

Author

  • Codrin Pavel

Made with

  • HTML / CSS

About a code

Steve Jobs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Single element 8-bit Fight Club Animation

Author

  • Albert Filice

Made with

  • HTML / CSS

About a code

Single element 8-bit Fight Club Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Single Element Animated CSS3 T-Rex

Author

  • Codrin Pavel

Made with

  • HTML / CSS

About a code

Single Element Animated CSS3 T-Rex

Single element animated CSS3 T-Rex. No masks.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -