Dissolving Pixels, Bouncy UI, and Wavy Illusions

No dark-mode styles — this email renders the same in a dark client.

View this issue on CodePen
Dissolving Pixels, Bouncy UI, and Wavy Illusions
This week's CodePen community highlights include a tool for crafting pixel dissolve transitions from Matthew Morete, a bouncy price selector from MyXoToD, and a classic illusion in pure CSS from Amit Sheen.
Plus, Jon Kantner brings us a Bauhaus-style gradient clock, and Mustafa Enes plays with Zdog.
sponsor
Workshop: Promote AI agents on evidence
How do we know a new AI agent version is better, or when to roll it back? One pipeline promotes models, prompts, tools, and knowledge bases. The evidence: evaluation gates at each promotion point with criteria set up front. AWS experts demonstrate how it gets built.
pen
Pixel Dissolve Mask Generator
Try Matthew Morete's tool to "generate a tiny PNG sprite, wrapped in a SVG with image-rendering:pixelated , for a view-transition mask". Set your parameters, then press the "preview transition" button to see the full-size dissolve.
pen
Wavy Illusion
Amit Sheen brings us a classic mindbender, the wavy line illusion, with pure CSS. Here, fluttering lines attached to the top and bottom of static lines makes them look like they're changing length.
pen
CSS Moon
Marco Biedermann summons a lunar eclipse in just 46 lines of CSS 🌑
podcast
CodePen Radio #440: In-App Notifications That Like You
Chris and Rach are on the podcast to talk about our brand-new in-app notification system. We’re actively trying to balance a system that isn’t annoying, but allows us to show information to specific users when we think that’s valuable for both you and us.
pen
Gradient Clock
Jon Kantner builds a shadowy clock with a Bauhaus vibe using gradient-filled clip-path: polygon shapes.
pen
CodePen Challenge: Lines & Bars
Week 3 of our Charts & Graphs challenge was all about lines & bars. Check out the collection, including Pens by grauconejo13 , devpec , grantjenkins , and ol-ivier . Want to get in on September's challenge? The final week is on now !
pen
Zdog omg.lol dancing in the sky
Mustafa Enes recreates the omg.lol heart mascot with good ol' Zdog , the trusty pseudo-3D engine from Dave DeSandro.
pen
CSS anchor navigation with spring-easing glow
A little glowing sprite follows your cursor and settles at the edge of the nav item you hover thanks to CSS anchor positioning and linear() in this Pen from Lionel Péramo.
pen
Bouncy Price Selector
Flip the monthly to yearly toggle and watch the numbers shuffle and bounce in this Pen from MyXoToD. Try it out in light or dark mode using the controls in the top right.
CodePen PRO
Instant Updating Previews on Unlimited Browsers/Devices
Testing something? Just open the preview URL in any other browser on any other device, and it'll stay up to date as you code from the Pen you're working on (if you're PRO). Watch a video or read the docs — but there isn't much to know; it just works.
Chris’ Corner
A collection of web design and development news and thoughts from CodePen's own Chris Coyier.
Sweet Typography
Choosing beautiful and unusual fonts and implementing them in visually compelling ways is certainly a way to stand out in this period of so many websites looking same-y. I figure it’s a good week to send some sweet typography links I’ve saved (in the form of screenshots):
Notable to me: Apple has a dedicated icons app . I played with the beta to see if I could get it to spit out SVGs, and it said it would but didn’t; I’m told the non-beta does, which is cool.
You can adjust your email preferences any time, or instantly unsubscribe to emails of this kind. Need help with anything? Hit up support . Interested in sponsoring? Here's our sponsorship info .
CodePen 70 SW Century Dr #1019 Bend OR 97702

Accession

nse/codepen/2026-09-30/2948

From

CodePen · support@codepen.io

Sent

30 September 2026 · 18:00 UTC