10 Cool CodePen Demos (April 2025)

Glitch Hover Effect

Nazanin Ashrafi shared a series of creative button effects this month, all built with pure HTML and CSS. The animations are simple yet cleverly executed and well-achieved. This glitching button changing shapes and colors caught my attention, but check her profile but other cool button designs.

Text circle animation

Scroll the page at different speeds and watch how the animation adapts in real time. It's mesmerizing and almost hypnotic. The fact that this is HTML and CSS only is mind blowing. Stijn Van Minnebruggen used scroll-driven animations to create this spinning word-wheel and took it to another level. Amazing demo!

Product Swiper

Tired of the same old product pages on e-commerce sites? Diana Moretti brings a fresh twist with a three-dimensional slider built using Swiper for this CodePen challenge entry. It's interactive, smooth, and a seriously cool way to showcase products!

BeerJS / Community Balloons

It will never stop amazing me what people can create with ThreeJS and some JavaScript. In this demo, Paul used ThreeJS and shaders to generate random unique landscapes (they change every time you run the demo) with floating hot-air balloons shifting in the air. Even the music matches the scene.

chill cat pure css

Sometimes you run up, sometimes you need to chill on a step like this cool cat resting on the stairs. Ekaterina drew this cute scene using only HTML and CSS. If you want to learn CSS Art, this is some clean and easy-to-follow code that can be great for learning and finding inspiration.

Dynamic Toggle with [type=radio] + :has()

Jh3y created one of my favorite demos in this series. A beautifully designed component that proves toggles, radio buttons, and HTML forms don’t have to be boring. It's crafted entirely with HTML and CSS (the demo uses a little bit of JS, but only for debugging purposes). Functional and stunning!

Night Flight

One HTML element. That's all Konstantin Denerz needed to code this animated Star Trek homage. The demo uses SCSS to streamline the code (we'll get native loops one day!), but the output is pure CSS. Tip: this demo looks even nicer in smaller screens; try zooming out on CodePen to fully appreciate the animation.

Blob shape with hover effect

The CSS shape() function recently gained browser support, and Temani Afif jumped to the opportunity of experimenting with it in a series of creative demos. This one highlights how easy to use the function is, and how it's bound to become a game changer in web design. Hover over the pictures to see the feature in action.

Nice <details> accordion

Just like with HTML forms, who says that accordions need to be static and boring? Certainly not Adam Argyle! He crafted a stylish demo with the native <details> and <summary> tags, and animated them to look cool and modern while preserving the out-of-the-box functionality.

Stagger

This sleek logo/title reveal by Cyd Stumpel reminds me of an Apple commercial from a few years back. The transitions (powered by GreenSock) are smooth, polished, and elegant. This nice effect would be a great addition to any website. A very cool demo.