Yes, this is just CSS! 16 mind-blowing CodePen demos

CodePen is a great destination for designers and developers to gain inspiration and show others their skills. Every day, the fantastic CodePen community creates something unique by pushing the boundaries of front-end development. 

Let’s broaden our horizons by exploring, deconstructing, and forking some of the latest CSS-only demos (note: some of these are so cutting edge they use experimental CSS features and won’t work across all browsers).   

First up, and in this inspiring example, Niklas has created a 3d tag cloud resembling a rotating 3d sphere. Click outside the tag cloud to see how its direction of rotation changes depending on where you click.

Be sure to embed it in your blog!

This is another lovely demo from Niklas, where he’s made a flexible 3d carousel/slider in pure CSS. Click each thumbnail and watch it light up and switch to full color.

In this demo, Thea has coded an impressive 3D wave animation with some clever use of CSS selectors. Click on an image to see how smoothly it scales.

In this example, Matthew has built a customizable horizontal infinite marquee (yes, with accessibility in mind) that slows on hover.

If you’d like to learn how to code something similar, check out the demos we built with GSAP in a recent tutorial How to build horizontal marquee effects with GSAP on Tuts+.

Moving on, we have this stunning gooey marquee from Amit, who uses straightforward CSS to make it. 

Amit is also behind this fantastic CSS animation, where a ball moves within the boundaries of an animated grid. As the ball rolls around the screen, it compresses tiles, giving us an amazing sense of depth and dimension.

In this next demo, Jhey has created an animated CSS-only pricing page with a toggle switch by taking advantage of the :has() CSS pseudo-class.

Without a doubt, an excellent pricing page design!

Take a look at the CSS-only toggle switch component we built for a pricing page tutorial on Tuts+. How to build a pricing table with a monthly/yearly CSS toggle switch explains all you need to know!

This is another demo from Jhey, who makes scroll-based CSS animations with the help of modern CSS animation properties like animation-range and animation-timeline.

Consider it an experimental demo because it won’t work in all browsers—some of the properties used aren’t yet widely supported.

If you’re interested in learning more, here’s a tutorial that describes how to create a comparable animation using the Intersection Observer API and the clip-path property: Create beautiful scrolling animations with the CSS clip-path property.

The new CSS :has() selector can be used in all sorts of scenarios, and Jason uses it to build a CSS filtering component in this demo:

Interesting eh? Look at this tutorial, in which we build a similar component using a combination of CSS selectors: How to build a filtering component in pure CSS.

Mozzarella demonstrates another great use of the :has() selector by building a collapsible CSS gallery.

Moving on, Ryan has created some excellent wavy ripple effects on these buttons with just a little CSS.

Let’s take a look at some more cutting-edge CSS. In this case, Temani has used the experimental anchor() CSS function to produce a bounce menu hover effect.

Next up, Ben created the King of Hearts in this demo with pure CSS and custom HTML elements. Amazing!

Time for a simple but appealing effect. Here, Alvaro has coded an animated navigation list that is unfolded like a staircase.

This is another CSS unfolding animation by pxlgrdnr. This is a superb example of motion adding an element of delight to the web.

We’ve reached the end of our demos! So last (but not least) Chris shows us an inspiring menu effect where the menu item rotates around its icon on hover.

After all those examples, you’ve had plenty of inspiration to go away and code your own CSS magic! We plan to update this list with new CSS-only CodePen demos occasionally, so don’t forget to revisit it for new stuff. 

If you need even more CSS inspiration, check out tutorials like “How to create 12 different CSS hover effects from scratch,” “Create a sliding cards UI with HTML & CSS,” “The best “CSS checkbox hack” tutorials on Tuts+,” or “How to build seamless masonry layouts with CSS Grid and object-fit:cover.”