CodePen

Such a cool "Copy" interaction from Tyler Sticka:
https://tylersticka.com/journal/that-tear-off-tab-copy-button-effect/

Three nice styles for highlighter-style elements:

- https://codepen.io/HejChristian/pen/NPbBeqO
- https://codepen.io/cassidoo/pen/JjQOBZB
- https://codepen.io/vii120/pen/KwMBaaY

" demo" by Bramus
https://codepen.io/editor/bramus/pen/01a0a185-7c1d-7487-9082-528055f64685

Pretty impressive combination of new web tech to make this happen: , the OpaqueRange API, and the CSS Custom Highlight API.

We've got a full-blown Read/Write API now. Just so ya know.
https://blog.codepen.io/docs/api/api-v2/

REST or GraphQL.

"Pure CSS Autumn Lake" by Rob

https://codepen.io/editor/Sensiblemnd/pen/01a10210-a654-7e29-88af-2420b32c7ec8

"Globe Spinners" by Jon Kantner

https://codepen.io/editor/jkantner/pen/01a07de7-6d37-7967-8701-f362b18d480d

"Lines and Bars with WebDataRocks and HighCharts"

https://codepen.io/editor/webdatarocks/pen/01a0d364-d876-7bd8-b675-081b8d1644e3

"Inline Block Processing" is a cool thing CodePen can do.

Here's a video showing it off:
https://www.youtube.com/watch?v=AyAFRRgq3dw

Docs:
https://blog.codepen.io/docs/pens/blocks/inline-block-processing/

Examples:
https://codepen.io/collection/eYVeaY

"3D Rowing Boat" by Grant Jenkins

https://codepen.io/editor/grantjenkins/pen/01a07bf9-0891-711d-8167-193db394e525

"CSS 8" by Stijn Van Minnebruggen

https://codepen.io/editor/donotfold/pen/01a0338f-bf79-7da2-b582-ad9fe4b9f586

Live streamin' soon! (10am Pacific)

I think we're gonna call it CodePen School. We hang out, build stuff, look at interesting things, try to be educational, etc.

YouTube: https://youtube.com/live/ioOYSdvsax8
Twitch: https://www.twitch.tv/codepen

Our Charts & Graphs challenge continues!
This week, we're baking up pie and donut charts 🍩
https://codepen.io/challenges/2026/september/2
Thanks @MongoDB for sponsoring! https://srv.buysellads.com/ads/long/x/THHPHHSPTTTTTTF7S4GCWTTTTTT3ZX6A2VTTTTTTWTQQ5BETTTTTTYBKKR7CPAB42RJMVMZVQ3ZWESLUKQDMKNIN52FT?cid=394844

"E(tch a sketch)mail - Signature" by Gymnase

https://codepen.io/editor/gymnase/pen/01a0208f-c55f-7b19-9305-4cc1381ef62d

> Voting is now open for the Tiny Awards 2026!

https://tinyawards.net/

> The Tiny Awards exist because we thought it was important to shine a spotlight on the sorts of personal web projects that tend to get overlooked by more traditional, larger or more commercial awards.

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

"GSAP Flix+" by mike-at-redspace

https://codepen.io/editor/mike-at-redspace/pen/019fd684-db73-72f2-bc1f-df5b28d2f269

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

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

"UZUMAKI" by Alansdead

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

"3D Interactive Chart" by Grant Jenkins
https://codepen.io/editor/grantjenkins/pen/01a0b4d4-ff57-707c-863e-39e7806c618f

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

CodePen School (Live Stream) at the top of the hour!
https://www.youtube.com/watch?v=5Idb6EaDsYE

Probably gonna share some cool tools and techniques, news, answer some questions, maybe a little Stump Stephen!

We've got a Twitch too:
https://www.twitch.tv/codepen

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 September CodePen Challenge is on!
This month, we're working with Charts & Graphs, starting with a Flowchart
https://codepen.io/challenges/2026/september/1
Thanks @MongoDB for sponsoring!: https://srv.buysellads.com/ads/long/x/THHPHHSPTTTTTTF7S4GCWTTTTTT3ZX6A2VTTTTTTWTQQ5BETTTTTTYBKKR7CPAB42RJMVMZVQ3ZWESLUKQDMKNIN52FT?cid=394844

The final week of our September challenge is on!
This week, you'll chart your own course 🗺️
https://codepen.io/challenges/2026/september/4
Thanks @MongoDB for sponsoring! https://srv.buysellads.com/ads/long/x/THHPHHSPTTTTTTF7S4GCWTTTTTT3ZX6A2VTTTTTTWTQQ5BETTTTTTYBKKR7CPAB42RJMVMZVQ3ZWESLUKQDMKNIN52FT?cid=394844

The October CodePen Challenge is on!
This month, it's Jest Halloween 🎃
Every week you'll get a starter Pen with a Jest test and a Halloween twist
https://codepen.io/challenges/2026/october/1
Thanks @PagerDuty for sponsoring! https://srv.buysellads.com/ads/long/x/T6ZY6BZPTTTTTT6GOHECWTTTTTTV7HS42VTTTTTTE33CLBETTTTTT2ZCVRD66W3YGHIDCBIPPHKHPA7WCRHC554FCQEE?cid=388275