CodePen

Out with :nth-child(), in with :sibling-index()! Just so satisfying to use.

* no Firefox yet

AIM (Anchor Interpolated Morph) is a pretty cool idea from Adam.
https://argyle.ink/anchor-interpolated-morphing

Here I'm using it for a [popover]-powered image gallery where the thumbnails open full-size images. They animate from where they were, and close back to where the were as well.

In CodePen 2.0, there aren't separate URLs for Full Page View, Details View, Presentation View, etc. Those are all just query params now, and the trick is just to get the screen how you like it and click "Copy Link with Layout".

"Page flip!" by Liam Egan

https://codepen.io/shubniggurath/pen/jEMNobq

CodePen now has a Lightning CSS Block. It's a "syntax lowerer" (like Babel is for JS, but for CSS). It respects your browserslist! It's a bundler! It's a minifier!

You can take any 2.0 Pen:
https://codepen.io/editor/team/CodePenTemplates/pen/019cfcb5-ae0e-7b17-8d29-744d29b46458

And deploy it:
https://tight-hill-cattle.codepen.app/

Then map it to a subdomain*:
https://subscribe.shoptalkshow.com/

Three-minute video on how here, and docs:
https://blog.codepen.io/docs/pens/deployment/

* apex domains coming soon.

"Data Tunnel - Three.js" by Sabo Sugi

https://codepen.io/sabosugi/pen/azZmLoB

"Picket fence animation using scroll animations" by Chris Bolson

https://codepen.io/cbolson/pen/JoKBeaW

The April CodePen Challenge continues!
This week's code word is: Loop 🔁

https://codepen.io/challenges/2026/april/2

Thanks @MongoDB for sponsoring: https://srv.buysellads.com/ads/long/x/THHFSIZQTTTTTT6JEG4CLTTTTTTKAUNC26TTTTTTWDCABBVTTTTTTI4MVJAULS7U53AIPSLFV7I6NKL5ZHRHTMIEPH2T?cid=371477

WWDC26 (Logo attempt from Reddit thread) by rafaelcastrocouto

https://codepen.io/rafaelcastrocouto/pen/XJjEwLq

"Jelly text (Variable Font Physics)" by mike-at-redspace

https://codepen.io/mike-at-redspace/pen/JoRPvpy

(Feels like you could recreate some of the great design at https://follow.art/ with variable fonts!)

It's the final week of the March CodePen Challenge!
This week, we're working with Opposite Directions ⬆️⬇️
https://codepen.io/challenges/2026/march/4

"OctaVase" by Paul

https://codepen.io/prisoner849/pen/jEMOopM

"Chicky" by Takane Ichinose

https://codepen.io/takaneichinose/pen/zxBerNV

The April CodePen Challenge is on!
This month we're working with Code Words

https://codepen.io/challenges/2026/april/1

Thanks @MongoDB for sponsoring: https://srv.buysellads.com/ads/long/x/THHFSIZQTTTTTT6JEG4CLTTTTTTKAUNC26TTTTTTWDCABBVTTTTTTI4MVJAULS7U53AIPSLFV7I6NKL5ZHRHTMIEPH2T?cid=371477

"UZUMAKI" by Alansdead

https://codepen.io/Alansdead/pen/zxGyOmx

Our Front-End Opposites challenge continues!
This week, we're working with True & False
https://codepen.io/challenges/2026/march/3

The March CodePen Challenge continues!
This month is all about front-end opposites.
This week, our opposites are Min & Max
https://codepen.io/challenges/2026/march/2

The March CodePen Challenge is on!
This month, we're working with front-end opposites
https://codepen.io/challenges/2026/march/1

It's the final week of the February CodePen Challenge!
Let's play with new colors 🎨
https://codepen.io/challenges/2026/february/4

The February CodePen Challenge continues!
This week, we're mixing and blending colors 🎨
https://codepen.io/challenges/2026/february/3