9 Pure CSS CodePens We Absolutely Love

This post is a bit different than what we typically share here. Over the years, we’ve come across amazing work by talented designers across the globe. Designers and developers create awesome stuff, but you already know this. Look at your favorite things in life. Practically everything has been created by talented people over the years.

Today’s blog post will show off amazing work of designers who have taken their coding skills a step further – creating amazing works of art entirely with CSS (HTML is present, but what you’re seeing in the examples below are built on the back of pure CSS).

#1 Scenic Horse Racing

This one looks like it could be an introduction to a game, or a great opening slide to a website, built without traditional images.
This is an excellent example of thinking outside of the box. Impress your visitors with this eye catching backdrop and an engaging headline.

See the Pen Muybridge horserace refresh by Krishna Chaitanya (@krsnachaitanya) on CodePen.

#2 Walking Dinosaur

Who doesn’t like dinosaurs?! Crazy people. That’s who. Creating a dinosaur (or any creature really) with just CSS is a great way to add life to your page, without creating a large animated graphic file. It’s also a great way to flex those coding skills at the same time.

See the Pen HTML & CSS Animated Dinosaur by Robert Marshall (@RobertMarshall) on CodePen.

#3 Bob Ross, animated and full of life!

I once dressed up like Bob Ross for Halloween. When I came across this CodePen, I had to save it. If you ever watched Bob Ross painting, you might agree that this CSS animated man resembles Bob Ross both in appearance, and in spirit (very happy!)

#4 An animated, classic gaming console

This classic Nintendo system was built entirely with CSS. Sadly, it won’t play your games. Maybe some day, someone will create a game entirely built in CSS (spoiler: they have), and could find a clever way to make this animated CSS Nintendo work as a preloader of sorts…

See the Pen Full CSS NES by Vincent Durand (@onediv) on CodePen.

#5 A modern gaming console

If you aren’t into the classics, maybe a Nintendo Switch made entirely with CSS is up your ally.

See the Pen Nintendo Switch (Pure CSS) by Josh Bader (@joshbader) on CodePen.

#6 The Mine: A CSS Adventure

Web based games are nothing new. We’ve been playing games on the web for as long as it’s been around. Flash games, JavaScript games, AJAX games, the list goes on. Up until recently, it was impossible to create any real game with depth using just HTML and CSS. Give it a try. The novelty factor alone makes it worth your time!

#7 Crossword Puzzles

Here’s another game, equally as impressive as the last. We consider this one to be impressive because it’s easily recreated and applicable to many situation. After all, crossword puzzles have been around over one hundred years and featured in hundreds of thousands of publications since it’s inception.

See the Pen Pure CSS crossword - CSS Grid by Adrian Roworth (@adrianroworth) on CodePen.

#8 Pure CSS for Gardeners

If you have a client who is in the gardening or landscaping industry and they’re looking for something specific to them, look no further. Consider a garden made entirely of CSS for a project like this.

See the Pen 🌱 Succulents by Chris Ota (@chrisota) on CodePen.

#9 Smartphone CSS

Everyone knows what this is. It’s a phone. No, it’s a picture of a phone. NO, it’s a phone, rendered entirely with CSS!

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@_fbrz) on CodePen.

Next time you’re having creator’s block, head over to CodePen or Dribbble and take a gander at what people have been doing. Just be prepared to lose half your day. It’s easy to get lost when there’s so much talent in one place.

What's your favorite pure CSS project? We'd love to hear from you.

Bocain Designs

Bocain Designs

Bocain Designs offers WordPress web design services for small businesses and startups in upstate New York and beyond. We've worked with over 2,000 business owners from 80+ countries. Let's talk about how we can make your business awesome online!

Get Help With Your Website

Contact Bocain Designs for a free consultation and plan.
Let's Talk