In which Bramus learns that MDN publishes their page view data publicly, builds a website, and deploys it on CodePen. Site: ready-unit-fowl.codepen.app Blog post: www.bram.us/2026/08/03/m...

Just saw www.morphicons.com 6kb library for morphing icons. Works pretty nicely on CodePen. codepen.io/editor/team/...

📝 New CSS Article! You know the <img> element, right? It's one of the most-used elements, and yet it hides a secret. 🤫 What kind of secret? Read my latest article to know about it (You will be surprised!) master.dev/blog/somethi...

Something Nobody Told You About The Image Element (It Can Overflow!)

You normally don't think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually...

master.dev

What if there is a specific file in a Pen you want to use elsewhere? Just grab the URL for it and use it. Global Assets is more specifically designed for that, though — especially for images where it's got extra superpowers like resizing, quality control, and auto-formatting.

Oh crap. Something is off on this Pen but I KNOW I had it working correctly last night. Just revert to that version, no big deal. (And you can check it out and confirm first.)

Code formatting is covered on CodePen. You can "Format File" from the context menu on any file as a one-off. Or add a block like Prettier, which offers better config control and diagnostics. It's all smoothly integrated.

"Dot Grid | Wave & Glue" by JP codepen.io/jpbelley/pen...

You know how we write the HTML emails we're using for our launch email campaign? In MJML! mjml.io It's such a nice language for crafting HTML emails that work across all email clients. You know where we do it? On CodePen (because we support .mjml now). 💪

🎧 In which we each pick our favorite 2.0 feature and tell you why it rules. blog.codepen.io/2026/07/23/4...

> Blocks adds a visual layer to the opaque world of preprocessors, linters, and build processes. CodePen takes those processes and stack them on top of each other to form a predictable pipeline that you can easily visualize and understand how the sausage gets made. daverupert.com/2026/07/code...

The new yet familiar CodePen 2.0

CodePen v2 is now released! Because I co-host a podcast with Chris I’ve had an up-close perspective at this monumental effort over the last five years. I know how much work has gone into this release…

daverupert.com

"It Was Never A Competition" by Margarita codepen.io/Margarita-th...

We've got a bunch of (short!) videos of interesting things 2.0 can do up at this domain: codepen.school Naturally, the site is just a Pen. codepen.io/editor/chris... (Vite/Vue + Markdown Files) Any 2.0 Pen is instantly deployable 🚀

It's the official 2.0 launch day. (checks emojis, there isn't one big enough). You can listen to (or watch) our team pick out our favorite features blog.codepen.io/2026/07/23/4...

435: The 2.0 Launch & Team CodePen’s Favorite Features

The whole team is here! That’s a first for us. Today we’re launching 2.0, so we’re having a little fun in this episode picking out our favorite features. Time Jumps 00:00:07 The m…

blog.codepen.io

Chris Coyier@chriscoyier.net · 2w ago

(sniffs the air) Is that a new homepage? codepen.io

"Sprout" by Giedre Ju codepen.io/editor/Giedr... (Pretty nice dynamic newspaper-like layout!)

Of course I had to recreate this with CSS/JS. codepen.io/defaced/pen/...

Neale Denaro @nealedenaro.bsky.social · last mo.

Anyone got the latest patch for Nivea suncream? My bottle seems to be glitching.

It's week 2 of the "Get to Know 2.0" CodePen Challenge! This week, we're building with Blocks codepen.io/challenges/2...

Really love this .wrapper-free approach to multi-width grid layouts from @ryanmulligan.dev!

Layout Breakouts with CSS Grid

Extending elements beyond the content area with CSS Grid and named grid lines.

ryanmulligan.dev

"CSS Scroll-Spy Timeline Navigation" by Paul codepen.io/editor/Maseo...

light-dark() just got more powerful 🎊 Safari Technology Preview 246 adds support for using it with image values — not just colors. Swap gradients, photos, or any background image based on system appearance, no media query needed. Demo: codepen.io/ntim/pen/Pwb...

CSS light-dark(<image>, <image>)

...

codepen.io

A new #cssonly demo: scroll-triggered counters. In supporting browsers (Chrome only currently), counters count up when scrolled into view. Built with `timeline-trigger`, `animation-trigger`, `attr()`, `@property` and `sibling-index()`. See the demo on @codepen.io: codepen.io/editor/cbols...

CSS only counters using timeline-trigger, animation-trigger & attr()

This demo uses the experimental timeline-trigger and animation-trigger properties to start CSS animations when the counters enter the viewport. The co

codepen.io

In between tasks today I thought I'd try my hand at some CSS art on @codepen.io with no docs/AI/reference help (besides a graphic of a monkey) and I'm pretty happy with the result! codepen.io/editor/cassi...

Monkey in the water

A peaceful monkey in the water. Monkeys love CSS. This was inspired by this Dribbble: https://dribbble.com/shots/3928989-The-peacefull-monkey

codepen.io

Pleasantly surprised to see one of my CodePen demos passed 1,000 hearts 🥺🥰 Folks might think it's silly, but these little things mean a lot to me as someone that's constantly fighting with myself that I'm not good enough. So thank you to everyone, it's a good boost ☺️ codepen.io/HejChristian #CSS

My latest CSS 3D animation on Codepen: codepen.io/sebastianlen... Pretty amazing what you can do with just CSS these days. @codepen.io

Pure CSS 3D Animation: Neon DNA Helix

...

codepen.io

"Carve the Moon, Weave the Clouds // Character Roster." by Mizo buff.ly/O6iq3AP

This week I'm sharing a navigation element that animates a displacement filter using @gsap-greensock.bsky.social rough easing. This creates a cool retro glitch effect, have a look on @codepen.io: codepen.io/jdillon/pen/... #JS #GSAP #SVG

Here is my idea of the animated Grid layout No View Transitions, No JS, and no Anchor Positioning. You get an animation on resize and when adding/removing new items. css-tip.com/animated-grid/

Bramus@bram.us · 2mo ago

New demo: Animated CSS Grid Layout. codepen.io/bramus/pen/o... Here’s the thing: No View Transitions. No JS at all. Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

btw: if you design in CSS you barely need this: a quadratic bézier is easy to compute in calc(), so your typographic curve can follow the browser width directly, not a single breakpoint. KurvenLineal is handy when you need to hit certain key font-sizes. Demo @codepen.io codepen.io/editor/meoda...

David Aerne@meodai.bsky.social · 4w ago

tiny lib: KurvenLineal: fits a bezier easing to an existing size scale. cubic-bezier in reverse... I like sizes in a design system to be on a curve. When a DS wasn't built that way, this changes all sizes at once, in relation to where they were. meodai.github.io/kurvenlineal/

"text stickers" by Vivi Tseng codepen.io/vii120/pen/v...

At the CSSWG there is an issue about 2D Mesh gradients. The consensus was that whatever we do, it should be PDF compatible. With the help of Gemini I found my way to “Coons Patches” as the underlying mechanism. Using AIStudio, I then generated this editor: genuine-waterfall-crane.codepen.app

This was a really fun article to write/experiment to do! I messed with how things were rendering across browsers for... far too long. AI could never! cassidoo.co/post/radial-...

An animated radial gradient mask over text in CSS

Here's a technical walkthrough of how I made a fun little demo to mask some text in a clever way with CSS.

cassidoo.co