11 Experimental CSS Projects That’ll Blow Your Mind

Default avatar.
September 28, 2017
11 Experimental CSS Projects That’ll Blow Your Mind.
There’s a lot you can do with just CSS and a web browser. Great developers love to push the envelope and show just how much is possible. While experimental projects aren’t always useful on production sites, they are incredibly inspiring and educational. We’ve organized a handful of CSS projects that showcase the true power of CSS. These are all hosted on CodePen so you can even study and clone the source code to see how they work.

1. Gradient Loading Bars

This Sass loading page uses animated gradients and resizable elements to create a repeating loading effect. Most people should recognize this loading animation from Facebook which uses a smaller version of this vertical bar loader. But most web loaders use animated GIFs since images are more compliant with all browsers. This CSS3 loading bar proves that with some creative thinking to can rebuilt almost any animation style you want.

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

2. Solar System Animation

Here’s one of the most complex CSS projects I could find online. This dynamic solar system design by Malik Dellidj runs on pure CSS without any images. Every planet is rendered in CSS including the rotation speeds. This project is meant to be an accurate model of the solar system and it even features a realistic interstellar background to boot. I can’t imagine how long this took just to make the planet icons, let alone get the animation speeds right. But where there's a will there’s a way.

See the Pen Solar System animation - Pure CSS by Malik Dellidj (@kowlor) on CodePen.

3. Pure CSS Minesweeper

I never thought I’d see the day when classic Windows minesweeper could be played using pure CSS. Yet thanks to developer Bali Balo that day has come. Note this doesn’t work exactly as well as the traditional Minesweeper because it doesn’t keep score properly. But it does track time accurately and it doesn’t use a lick of JavaScript. Somehow even the interface looks surprisingly close to the original Minesweeper UI and it all runs on CSS. While it may not be a perfect replica it’s close enough to reel me into playing a few rounds.

See the Pen Pure CSS minesweeper by Bali Balo (@bali_balo) on CodePen.

4. Day and Night Toggles

On the surface this toggle switch may look pretty simple. It runs through a checkbox input and passes data onto the backend, although that’s not really the impressive part. This toggle has a few features that make it one of the best frontend on/off switches:
  • The toggle icon changes from a sun to a moon
  • Stars and clouds animate into while switching
  • It’s designed with 100% pure CSS
Somehow this on/off switch catches every user click and uses that event to animate the day/night toggle area into view. The sun and moon icon designs are also nicely stylized considering they run on nothing but CSS.

See the Pen Pure Css "day and night" toggle by Benjamin Réthoré (@bnthor) on CodePen.

5. CSS Mouse Tracking

Traditional mouse tracking is the work of JavaScript which reports the user’s X/Y coordinates on the page. Technically you still need JavaScript to gather these coordinates and do anything useful with them. But this snippet shows that you can design a pure CSS mouse tracking feature that follows the user’s every movement. Can’t really think of a practical use for this but it could be fun on a prank site.

See the Pen Experimental pure CSS mouse tracking by Momcilo Popov (@Momciloo) on CodePen.

6. Flat Amusement Park

We’ve all seen vector icons and illustrations designed for the web. But what about full-page vector illustrations designed with raw CSS and SVG code? This amusement park design is an experimental project that only works in SVG-supported browsers. Yet in those modern browsers it renders flawlessly and every element has a very realistic placement on the page. The animations are certainly impressive but it’s the accuracy of the SVG elements that also grab my attention. In a few years we might find these kinds of illustrations on the web running solely in code without any image files.

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

7. Möbius in 3D

Designing a repeating CSS animation like the Möbius strip concept is pretty tough. But add in some 3D elements and varying gradients? Now you’ve got a real challenge. This snippet is quite impressive considering how smooth it looks and how little code is used (only 90 lines of CSS). With Haml you only need 6 lines of code to create the entire concept too. I’ll admit this wouldn’t be super useful on a real website but it’s a testament to how much you can do with a few dozen lines of HTML and CSS.

See the Pen Möbius 6hedrons (pure CSS) by Ana Tudor (@thebabydino) on CodePen.

8. Custom Map Creator

After using this webapp for a few seconds you may feel confident that it runs on JavaScript. The dynamic behaviors like 3D rotation and terrain placement are all signs of a sweet JS webapp. But this map creator UI by Vincent Durand is actually 100% pure CSS. The arrows for rotation, the rotation effect itself, and all the click-to-place features run on CSS. It’s worth mentioning how this entire concept is rendered using 3D cubes too. The blocks themselves work as 3D elements and you can rotate the cubes just by hovering. No doubt one of the craziest uses for CSS I’ve seen in a long time.

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

9. Pure CSS iOS 7 Icons

This project’s a little less interactive but still just as breathtaking. Developer Peter Schmiz recreated all of the main iOS 7 app icons using pure HTML and CSS. None of these icons use any SVGs or image files. Every element in each icon is hard coded into HTML with a span/div element, then styled using CSS. The craziest part is how accurate these are! The full set includes 22 icons and they’re all pretty spot on. I’m most impressed with the attention to detail for icons like Maps and Weather. Just more proof that with enough time and patience you can pretty much design anything in CSS.

See the Pen iOS 7 icons with pure CSS by Peter Schmiz (@peterschmiz) on CodePen.

10. Single-Element Slack Loader

Re-creating the Slack loading animation with CSS3 is definitely impressive. But this snippet recreates the Slack loader with just a single element on the page. That’s what I call dedication. The total CSS count for this snippet is just over 100 lines which includes the Slack logo colors and the animation effects. I can’t say if this idea would work for other branded loading icons but I’m certainly impressed with this one.

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon) on CodePen.

11. Animated 3D Bar Charts

You’ll find dozens of custom 3D bar designs in CodePen all with their own animations. But these 3D bars by Rafael González stand out for all the other modern CSS bar graphs. Each of these charts run on flexbox for containers so they’ll auto-size depending on how many bars you add and how large the container is. Plus each bar chart animates when it slides into view, all of which is controlled through pure CSS. And since each bar’s size runs in em’s you can adjust every single bar to scale naturally based on browser font sizes. A nifty example proving that modern CSS is a whole lot more flexible than ever before.

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

Jake Rocheleau

Jake is a writer and user experience designer on the web. He publishes articles discussing HTML5/CSS3 and jQuery coding techniques. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

Read Next

15 Best New Fonts, October 2024

Welcome to our roundup of the best new fonts we’ve found online in the last four weeks. In this month’s selection we…

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…