12 Awesome Pure CSS Designs

CSS stands for Cascading Style Sheets and the styles are used to display how HTML elements will appear in a browser. CSS has come a long way since it was first recommended for use by the W3C back in 1996.  Today, there are some brilliant designers and developers capitalizing on the amazing things that can be done with it. Designs that could once only be done in a program such as Photoshop and uploaded as a jpg, gif or png file can now be created sans images – that is with pure CSS. Using a combination of linear-gradients, radius borders, box shadows, transformations and the like, designers have created some stunning pieces of art and below are twelve of my favorites.  Because CSS is browser dependent, if you follow the links for the full CSS experience (images below are PNG renderings of the CSS results), an updated browser is highly recommended.  Also, for an optimal experience I would recommend using Firefox, Chrome or Safari.

1. The Mona Lisa

CSS Mona Lisa

A Non Ymous recreated this awesome version of the Mona Lisa using only CSS …what?  Oh, yes – truly brilliant!! This is really one of the most amazing things I have seen done with Pure CSS.  On his page, the artist states, “I hand-typed the base64 by computing the huffyuvs on paper, of course.”

2. Darth Vader

Darth Vader CSS

For those Star Wars fans, artist Kris Triplett shows off his CSS skills by creating this pure CSS Darth Vader.  He also offers up a Storm Trooper too!

3. Cherry Blossoms

CSS3 Cherry Blossom

This Pure CSS Cherry Blossom piece is stunning.  With some animation, you might think there’s Javascript being used in this one, but you’d be wrong.  It’s done with 100% pure CSS.

4. Rainbow Apple Logo

Single element Rainbow Colored Apple logo

This complex, yet simple logo uses a combination of linear-gradient, border-radius, box-shadow, and transform elements to create this crisp CSS Rainbow Apple Logo.

5. Classic Train

Pure CSS3 Classic Train

Choo-choo…All Aboard this CSS Dandy! Taufik Nurrohman created this Classic Train using CSS3 and no images.  It even says, “No images! Believe me.” on the side of the train.  This is a marvelous example.

6. Luigi

Pure CSS3 Luigi

I think somewhere along the way, poor Luigi lost his sideburns and hair.  Even still, this cartoon classic looks stunning designed with pure CSS created by One Div.

7. Batman Logo

Batman Logo

This Batman logo is created by Oleg Milshtein using just circles and ellipses.  Rotating these in certain ways, gives the logo its classic look.

8. Triangular Parrot

CSS Triangular Parrot

This interesting art piece depicts a colorful triangular parrot sitting atop some text.  Design is by Erez Shinan.

9. Futurama’s Bender

Pure CSS3 Bender Futurama

 Vinicius Dacal Lopes created Bender from Futurama using CSS.  He’s even taken the time to animate him so that he’s blinking!

10. Social Media Icons

Pure CSS social media icons

These social media icons by Nicolas Gallagher are a wonderful example of an extremely practical use of pure CSS.  According to Nicolas, “All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.”

11. Animated Fish Tank

Pure CSS3 Animated Fish Tank

Bringing a bit of animation to the table, this awesome animated CSS fish tank does not use any Javascript.  The artist, Tayo.w, explains that the tank was created using CSS3 to style blank divs while using CSS3 animation keyframes to animate the fish tank and the fish.

12. Olympic Rings

CSS Olympic Rings

Since the Winter Olympics are just around the corner, I thought it was appropriate to end this list off with the Olympic Rings. Doug Neiner uses the border-radius feature to create them in pure CSS.  His page also features a slider so you can dynamically scale the logo.

Have a favorite?  Do you create CSS artwork?  If so, leave a comment or a link to your work or both!

About

I'm a web developer and designer who loves technology and social media. I am also a teacher who enjoys sharing my knowledge and helping others develop quality skills and habits to make the online world a better place for consumers and businesses.

9 comments on “12 Awesome Pure CSS Designs
  1. Nice!

    Missed put my Cartman in this list :p

    http://codepen.io/LFeh/details/qzDCJ

    • E Poff says:

      Felipe – these are awesome. Thanks for sharing your work with us. This blog post got such a great response from folks – I plan to do a part 2 soon. I’ll be sure to include some of your work. Thanks!!

  2. I developed too, a piano keyboard using Pure CSS (and javascript for sounds):

    http://www.felipefialho.com/piano/

    Pure CSS is very nice!

    • E Poff says:

      I love this piano keyboard. I can’t wait to show my son he’s taking lessons and learning to program too – he’ll be inspired I’m sure!

  3. My Bender, thank you for put him on the list :D. After bender I did the Iron Man, here is https://developer.mozilla.org/pt-BR/demos/detail/pure-css3-iron-man-marvel/launch.

    • E Poff says:

      Vinicius,
      Thanks for stopping by! You are super talented and as you can see I love the Bender you created! Your Iron Man is spectacular! Thank you so much for sharing. And please keep me posted on any of your other creations. I plan to do a follow-up to this post and include more great CSS works!

4 Pings/Trackbacks for "12 Awesome Pure CSS Designs"
  1. [...] CSS is being used to create some brilliant artwork, logos and animation pieces.  [...]

  2. bottes mellow yellow melon…

    Fantastic blog! I am loving it!! Will be back again later to go through some far more….

  3. sarenza ugg classic short…

    Very good publish, remarkable. its fairly diverse from other posts. Many thanks for sharing…

Subscribe Today!
Subscribe to receive valuable tips, articles and advice to help you with web development, design, and online marketing.

Privacy Policy | Terms of Use