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).   

1. 3D tag cloud

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!

2. 3D image carousel

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.

3. 3D wave animation

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.

4. Horizontal marquee

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+.

5. Gooey marquee

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

6. Ball on a colorful grid

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.

7. Pricing page

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!

8. Inverted reveal scroller

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.

9. Filtering

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.

10. Collapsible gallery

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

11. Ripple effect

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

12. Bouncy menu hover effect

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.

13. Scroll King

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

14. Animated navigation list

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

15. Animated order confirmation 

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

16. Navigation with rotating text hover effect

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.

That’s a wrap!

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.”