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

Links
Made with
- HTML / CSS
About a code
One Div Film
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Window Pixel Dog
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
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: -

Links
Made with
- HTML / CSS
About a code
Back to the Future Pixel Art
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Han Solo and Chewbacca Pixel Art
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Gordon Freeman Pixel Art
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Kiki's Delivery Service
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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: -
![Hunter from Destiny in Pure CSS [8-Bit] Demo image: Hunter from Destiny in Pure CSS [8-Bit]](/assets/img/css-pixel-art/hunter-from-destiny-in-pure-css-8-bit.jpg)
Links
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: -

Links
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: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pumpkin Animation on One Div
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Pirate Pixel Art CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Apple Logo
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pixel Art Bulbasaur
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
art.jpg)
Links
Made with
- HTML / CSS (SCSS)
About a code
Pulsing (He)Art
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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: -

Links
Made with
- HTML / CSS
About a code
Steve Jobs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Single element 8-bit Fight Club Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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: -