CodePen

The in-app notification for CodePen AI was fun to make. Penny gets to zoom around the <dialog> in a <canvas> with GSAP to make it smooth.

Chris & Alex talking about CodePen AI checks it's work after it makes changes. Que Fancy! Also a live example from the last CodePen School of it working great. bsky.app/profile/shaw...

One super cool detail is that @codepen.io AI double-checks its work. @chriscoyier.net and I were discussing the output from a simple prompt and while I was pointing out a small issue, AI had already caught the problem and was fixing it. Amazing to see in real-time. youtu.be/Re258px0v1k?...

I love this effect! The ball's motion stays constant. The only thing that changes is the shadow animation, and that's enough to trick our brains into thinking the ball is moving back and forth *or* up and down. The shadow positions the ball in 3D space. 🤯 🔗 @codepen.io: codepen.io/editor/amit_...

Fun new stream for @codepen.io School! Love doing these every week. Come hang out during the next one! youtube.com/live/Re258px...

How does CodePen AI do with the Cool S? With squigglevision? Friggin nailed it. (Wait... CodePen has AI now? codepen.io/features/ai 👀)

"Ghosts" by Curtis Lawrence codepen.io/editor/Miste...

Another #CSSonly `::scroll-*` demo! This one keeps things a little simpler, using scroll markers as tabs and scroll-triggered animations to bring the selected tab’s content to life. ⚠️ Currently only works in Chromium-based browsers. See the full demo on @codepen.io codepen.io/editor/cbols...

Another `:scroll-*` demo — an interactive CSS solar system! 🪐 Advanced `attr()` pulls planet data to define orbits and speeds, while `::scroll-marker` brings the planets to life. Always fun to see what CSS can do! See the full demo on @codepen.io codepen.io/editor/cbols... #CSSOnly

"Scroll-triggered animations: Variable Font: expand, shrink, squoosh" by utilitybend codepen.io/editor/utili...

〰️ Wavy Progress Bar 〰️ Mapping a custom property to `shape()` using a custom function. All in #CSS!!! 🤯 Single div, using background gradients, and animation on the background position. 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

Just love Emmet tab stops. Such a nice little DX thing.

Attention class! @codepen.io School with @chriscoyier.net and @shaw.city is happening today at 11am PST. Don't be tardy! youtube.com/live/hduqhpj...

Three nice styles for highlighter-style <mark> elements: - codepen.io/HejChristian... - codepen.io/cassidoo/pen... - codepen.io/vii120/pen/K...

Such a cool "Copy" interaction from Tyler Sticka: tylersticka.com/journal/that...

I'm looking forward to exploring the @codepen.io API. I've set up a selection of CodePen demos on my personal site, but they're forks that either diverge or have to be manually kept in sync. The API will let me use my local development workflow to keep self-hosted and CodePen-hosted pens in sync.

DID YOU KNOW: @codepen.io has a read/write API? blog.codepen.io/docs/api/api... Comes in GraphQL & Rest flavors so you can use what's best for your task. Updating a Pen is super easy and seamless.

We've got a full-blown Read/Write API now. Just so ya know. blog.codepen.io/docs/api/api... REST or GraphQL.

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 codepen.io/challenges/2... Thanks @PagerDuty for sponsoring! srv.buysellads.com/ads/long/x/T...

🎃 A little Halloween FizzBuzz fun! 100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻 Hover over one to see what happens… See the full demo on @codepen.io codepen.io/editor/cbols... #codepenchallenge #FizzBuzz #Halloween

CodePen School (Live Stream) at the top of the hour! www.youtube.com/watch?v=5Idb... Probably gonna share some cool tools and techniques, news, answer some questions, maybe a little Stump Stephen! We've got a Twitch too: www.twitch.tv/codepen

"<rich-input> demo" by Bramus codepen.io/editor/bramu... Pretty impressive combination of new web tech to make this happen: <datalist>, the OpaqueRange API, and the CSS Custom Highlight API.

🖐️✊ More Drag & Drop on @codepen.io 2.0! Panels can be dropped into the tab area for an expanded view, now including Settings & Assets. You can even drag the Console to a tab!

📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 blog.master.dev/transferring...

"Pure CSS Autumn Lake" by Rob codepen.io/editor/Sensi...

Finally cleaned up the CodePen. You can find it here: codepen.io/editor/kevin... The video is dropping tomorrow (unless you're a channel member... in which case you can watch it now 👀 youtu.be/Fi1MvM7whzg)

Did you know @codepen.io now has a Changelog? codepen.io/changelog Thanks to the awesome 2.0 Editor, we're releasing regular improvements, new features, and bug fixes. Keep your eye on that page, because we'll often reveal really big features in the Changelog first before any wide announcements.

"Lines and Bars with WebDataRocks and HighCharts" codepen.io/editor/webda...

✂️ 🌆 Image cropping everywhere! You can now crop an image in the Asset Manager (which opens in both 2.0 and the Classic Editor) and directly in the 2.0 editor.

"Inline Block Processing" is a cool thing CodePen can do. Here's a video showing it off: www.youtube.com/watch?v=AyAF... Docs: blog.codepen.io/docs/pens/bl... Examples: codepen.io/collection/e...

"3D Interactive Chart" by Grant Jenkins codepen.io/editor/grant...

Loved scroll-driven animations? Meet their scroll-triggered sibling. Instead of tying animation progress directly to the scrollbar, you can trigger full time-based CSS animations when crossing a scroll offset. See how to build them with pure CSS → goo.gle/4dhcvmh

"Mail Bounce" by Tommy Ho codepen.io/editor/tommy...

Coming up at the top of the hour is our weekly @codepen.io School with @shaw.city and I. YouTube: www.youtube.com/watch?v=Shsi... Twitch: www.twitch.tv/codepen Ya know: a little edu-tainment programming, showing off new CodePen features, stumping each other, etc.

"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com

The final week of our September challenge is on! This week, you'll chart your own course 🗺️ codepen.io/challenges/2... Thanks @MongoDB for sponsoring! srv.buysellads.com/ads/long/x/T...

Blocks and Files combine to form the ultimate power and flexibility of @codepen.io 2.0. This is a great example: One user file, script.test.js, and yet there's still a Preview... showing the test results!

"Globe Spinners" by Jon Kantner codepen.io/editor/jkant...

Wavy illusion 〰️ The cyan and magenta lines are the same length and do not change at all. 😵 (CSS only) 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

🕒 Class starts in 3 hours! If you're one of those "do homework right before the bell" kind of folks, this is your time. ✍️

💡CSS Tip! Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes! Let's start with Blobs. css-tip.com/random-blob/ You never see the same shape twice. A unique shape for a unique experience! 👀

Bounce! 🏐 (CSS only) Live demo @codepen.io: codepen.io/editor/amit_...

It's the 2026 LED ART CSS Challenge! 🥳 I've created an LED experiment! Fork the @codepen.io, Do something cool! The most creative & maddest will feature in my next YouTube. tinyurl.com/56cpxceh tinyurl.com/3y6tuv58 #CSSChallenge #CodePen #WebDev #CreativeCoding #CSSArt #LEDArt #FrontEndDev

A little color for your feed ✨ My bokeh background got picked on @codepen.io 😊 codepen.io/editor/HighF...

This GIF from @joshwcomeau.com's last email is mesmerizing. Here's the border-shape he made of that codepen.io/editor/joshw...

Don't be late for class. 🧑‍🏫 @codepen.io School: Live in 10 minutes. youtube.com/live/BFvGpJT...

Our Charts & Graphs challenge continues! This week, we're baking up pie and donut charts 🍩 codepen.io/challenges/2... Thanks @MongoDB for sponsoring! srv.buysellads.com/ads/long/x/T...

A CSS-only circular nav using experimental `::scroll-*`, `animation-timeline: scroll()` and anchor positioning. Scroll drives the items around the circle, with anchors handling the current label and prev/next controls. ⚠️ Chromium only. See the demo on @codepen.io: codepen.io/editor/cbols...

"3D Rowing Boat" by Grant Jenkins codepen.io/editor/grant...

It's the 2026 LED ART CSS Challenge! 🥳 I've created an LED experiment... Do something cool! The most creative and maddest will feature in my next YouTube. Your time starts now... youtube.com/watch?v=wHcJ... codepen.io/editor/ivorj...