Radial Clock Yet another clock experiment. This one uses minimal JS, just enough to pass the time values as CSS custom properties. The CSS then uses them to displ

This is the demo codepen.io/editor/cbols...

Just another clock… but really an excuse to play with CSS anchor positioning to place time labels along expanding clock-hand rings. JS updates a few CSS custom properties, whilst CSS uses and display the values.

The cheese color swapper was just an extra bit of fun.

See the demo on @codepen.io

Sounds like a good idea. Plus there are so many cool demos being created on Codepen every day.

This circular color theme switcher uses hidden radio buttons and clip-path on the labels.

See the full demo on @codepen.io
codepen.io/cbolson/full...

Artemis 2 Integrity - scroll to reach the moon An animation-timeline:scroll based animation to simulate the Artemis Integrity crewship approaching the moon. Note - this is NOT meant to be a realist...

A simple css scroll based animation to help celebrate the Artemis 2 crew reaching the furthest point mankind has travelled from earth 🚀

See the full demo on @codepen.io

codepen.io/cbolson/full...

#artemis

10 Cool CodePen Demos (March 2026) YouTube video by Alvaro Montoro

For the past 3+ years, I have been posting a monthly "newsletter" with some cool CodePen demos published during that month. alvaromontoro.com/10-cool-code...

For a change, I recorded a video talking about them and showing why I think they are cool: www.youtube.com/watch?v=KW91...

I have added many more details to this and improved the engine fire effect.
Keep popping buy to watch it evolve.

Thanks for including my custom select CodePen in your list. It was a fun demo to work on.

10 Cool CodePen demos 10 Cool CodePen demos from March 2026

10 Cool CodePen Demos from March
alvaromontoro.com/10-cool-code...

Really impressive CSS Art, even more impressive custom selectors, new feature showcases, electronic "dash battles", scroll-driven animations... and more!

#css #html #javascript #webdev #codepen

I just watched the preview video an must say that this looks amazing! So much work must have gone in to creating this.

I'm almost tempted....

Well done Kevin 👏

To celebrate the launch of Artemis II 🚀, I put together a #cssonly scroll-driven animation.

Powered by animation-timeline: scroll — no JavaScript, just modern CSS.

Still WIP, but already a fun experiment.

Full demo on @codepen.io ✨
codepen.io/cbolson/full...

#artemis

Nice!
I also created something similar but not up to the detail that you have included (I am still adding things). Mine was more about the booster and core stage separation using animation-timeline:scroll.

CSS Demystified - a course by Kevin Powell Start writing CSS with confidence.

I've just relaunched CSS Demystified!

Rebuilt from the ground up, on my own custom platform, and here to help you start writing CSS with confidence 😊

thecascade.dev/courses/css-...

More CSS anchor positioning fun!

In this demo:
– an indicator slides behind hovered avatars
– team data snaps perfectly into a central octagon

All tied together with a bit of corner-shape() magic.

Pure CSS.

Full demo on @codepen.io
codepen.io/cbolson/pen/...

One of my finalists is still in the competition but my winner is out ☹️

Arrowed nav links using just corner-shape().

Hover or focus to expand — pure CSS, zero JS.

Full demo on @codepen.io
codepen.io/cbolson/pen/...

There goes my bracket!
Some big upsets in todays round of #madCSS

This demo uses animation-timeline: scroll to smoothly zoom each card into the center as you scroll - powered by modern CSS.

See the full demo on @codepen.io
codepen.io/cbolson/pen/...

anchor ray 3 spotlights - final This would not have been possible without seeing Temani Afif’s mind-blowing CSS-only graph theory. https://codepen.io/t_afif/pen/YPWMmOP...

After finally understanding @css-only.dev's demo for calculating the shortest paths between points, I was able to create this little spotlight effect. Pretty happy with the result!

codepen.io/enbee81/deta...

Congrats on reaching 500 editions 👏

And thanks for including my Custom Select F1 driver pen 😁

One day you're like "we should send a weekly newsletter about the cool stuff on @codepen.io and around".

Then 500 weeks go by. 🎉

codepen.io/spark/500

I think that it all depends on what, and how you are animating.
I would normally go 150ms for hovers and transitions but in this case, as you say, there is a lot of content and I felt that anything faster than 500ms was too fast.

Note - this does use JS to generate the HTML, creating the cars and populating the data attributes with race data.

Race to the 2025 F1 Drivers’ Championship 🏎️

This demo leans heavily on modern CSS:

• advanced attr() functions
• animation-timeline: scroll

The race positions and data update as you scroll through the season - all driven by CSS.

Full demo on @codepen.io
codepen.io/cbolson/pen/...

I would go for this one

ok, thanks for the quick answer.
Great job on this - I have a feeling that it is going to become adictive!

So does each player gets a different design from the others each day?

CSS Daily 2026-03-07
Score: 73% | Time: 10:02

Such fun! Hopefully with practice I can improve on that percentage!

cssdaily.dev

This is so cool!
Much harder than it looks with the time pressure 😅

Watched March MadCSS and thought "what if we could do this every day?"

So I built it. In a day.

cssdaily.dev — a daily CSS challenge. Write CSS to match a target, get pixel-diffed in real-time. New challenge every morning.

Scoring adapted from @wesbos.com and @tolin.ski's open-source SynHax.