Hand-Picked HTML and CSS Pixel Art Code

Browse a curated selection of hand-picked free HTML and CSS pixel art code examples from Codepen and other resources to create retro-style pixel art designs for your website.

One Div Film

One Div Film

Author:
Temani Afif | October 27, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Window Pixel Dog

Window Pixel Dog

Author:
Ale | October 4, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Zero Divs! Pure CSS Pixel Art Animation

Zero Divs! Pure CSS Pixel Art Animation

Author:
Ben Evans | September 25, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Back to the Future Pixel Art

Back to the Future Pixel Art

Author:
Sergey | April 13, 2017
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Han Solo and Chewbacca Pixel Art

Han Solo and Chewbacca Pixel Art

Author:
Sergey | April 12, 2017
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Gordon Freeman Pixel Art

Gordon Freeman Pixel Art

Author:
Sergey | April 10, 2017
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Kiki's Delivery Service

Kiki's Delivery Service

Author:
Kirsten Rauffer | June 2, 2016
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Star Wars BB-8

Star Wars BB-8

Author:
Udith Ishara Madusanka | February 5, 2016
Made with:
HTML / CSS (Less)

About a code

Pure CSS animation, single div, 8bit.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Hunter from Destiny in Pure CSS [8-Bit]

Hunter from Destiny in Pure CSS [8-Bit]

Author:
Andrew Kiproff | October 17, 2015
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Bat Pixel Art Animation on One Div

Bat Pixel Art Animation on One Div

Author:
Tim Guo | October 16, 2015
Made with:
HTML / CSS (SCSS)

About a code

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:
-
Pumpkin Animation on One Div

Pumpkin Animation on One Div

Author:
Tim Guo | October 15, 2015
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pirate Pixel Art CSS

Pirate Pixel Art CSS

Author:
Alex Konstantinov | August 10, 2015
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pulp Fiction CSS Pixel Art

Pulp Fiction CSS Pixel Art

Author:
Katia Shatoba | December 7, 2014
Made with:
HTML (Haml) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js
Pure CSS Apple Logo

Pure CSS Apple Logo

Author:
Codrin Pavel | April 8, 2014
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pixel Art Bulbasaur

Pixel Art Bulbasaur

Author:
Codrin Pavel | April 7, 2014
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pulsing (He)Art

Pulsing (He)Art

Author:
Codrin Pavel | April 1, 2014
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pixel Art Hellboy

Pixel Art Hellboy

Author:
Codrin Pavel | March 27, 2014
Made with:
HTML / CSS (SCSS)

About a code

One element, pure CSS, scalable pixel art Hellboy.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Steve Jobs

Steve Jobs

Author:
Codrin Pavel | March 9, 2014
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Single element 8-bit Fight Club Animation

Single element 8-bit Fight Club Animation

Author:
Albert Filice | February 19, 2014
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Single Element Animated CSS3 T-Rex

Single Element Animated CSS3 T-Rex

Author:
Codrin Pavel | January 22, 2014
Made with:
HTML / CSS

About a code

Single element animated CSS3 T-Rex. No masks.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨