CodePen

"Fading away text effect" by Cassidy

codepen.io/cassidoo/pen...

CodePen Radio - Podcast App Links - Plink Podcast App smart link to listen, download, and subscribe to CodePen Radio. Click to listen! CodePen Radio by CodePen Blog has 100 episodes. The CodePen team talk about the ins and outs of running a…

CodePen Radio is back!

This is a nice little page for adding it to your podcatcher of choice: plnk.to/codepen-radi...

"matter.js + Attractor" by vainsan

codepen.io/vainsan/pen/...

"CSS only bubbly hover direction button" by LukyVJ

codepen.io/LukyVj/pen/P...

Create a larger, invisible hit area around the element, making it easier to click without layout shift!

How? Use a pseudo element with `position: absolute` + `inset: -{value}px`

Demo to play with: codepen.io/una/pen/gbaWdmy

(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)

A black and white photo of a disco ball reflecting light from all sides.

The August #CodePenChallenge is on!
This month is all about light & shadow
It time to shine 💡
codepen.io/challenges/2...

When using scrollbar-gutter: stable, is there a way to control the fill color it uses?

For example, I'm working on a demo now and it's always black. My OS is set to dark, so maybe it's that? I have no other idea where it's getting the color, and can't find anything on how to change it 🤷

"Interactive Table with Image Hover & Idle Animation" by Filip Zrnzevic

codepen.io/filipz/pen/E...

"Click and Drag to Zoom" by Thea

codepen.io/HighFlyer/pe...

📝 New post: Sci-fi rectangles with `corner-shape` (Chromium 139+)

daverupert.com/2025/07/sci-...

✨ Been waiting for this one! ✨

24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count().

Working with multiple elements just got way easier! 🤩
(Currently on Chromium only)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

una.im | Creating a scroll-spy with 2 lines of CSS scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

scroll-target-group is coming to Chrome 140 (stable next month)!

Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!

Makes for a great progressive enhancement!

una.im/scroll-targe...

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

This news made me want to play with some code while listening to the podcast 😅 and thus, a blog post was born!

cassidoo.co/post/faded-t...

A guy having a great time sandboarding. He's prone on a sandboard, grinning as the sand scatters behind him.

It's the final week of the July #CodePenChallenge!
This week, it's time to freestyle 🛹

codepen.io/challenges/2...

Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...

"Bookmark" by Konstantin Denerz

codepen.io/konstantinde...

"three.js + Polygone Audio Grid" by vainsan

codepen.io/vainsan/pen/...

This week's #CodePenChallenge is all about Slideshows. (Use tag `cpc-slideshow`)

codepen.io/challenges/2...

Might be a good time to look at developer.mozilla.org/en-US/docs/W... (but it is all Chrome-only so far, so only if you're exploring.) We've got other ideas and resources on the page.

"AI Keys ✨" by Jhey

codepen.io/jh3y/pen/OPy...

"⮎END⇄START⮌ - an infinite loop in CSS" by Fitz

codepen.io/MackFitz/pen...

"Elastic SVG Sidebar Material Design" by Nikolay Talanov (2015!)

codepen.io/suez/pen/emj...

"Interactive Blackhole" by Prasenjit Nayak

codepen.io/StarKnightt/...

"splotchy chalk” by Sophia

codepen.io/fractalkitty...

"Wiggly Text with SVG Filter Effects" by John D. Jameson

codepen.io/johndjameson...

"Made This Dog with Just HTML & CSS. No SVG or Canvas!” by Julia Miocene

codepen.io/miocene/pen/...

Week 2 of the July #CodePenChallenge starts now!
This week, we're building slide interactions 🛝

codepen.io/challenges/2...

Thanks @MongoDB for sponsoring! srv.buysellads.com/ads/long/x/T...

✨ New article! ✨

A few weeks ago, while brainstorming silly things I could do with Scroll Driven Animations, I suddenly remembered that text can be animated too 🤯. That little spark quickly led me to a new idea: a Scroll-Driven Sticky Heading.

🔗 @css-tricks.com: css-tricks.com/scroll-drive...

"Death Stranding inspired menu" by Yexx

codepen.io/yexx/pen/bNd...

Slidy Gallery A gallery using css keyframe animations for the codepen challenge 07/25...

not done one of these for a while ~
codepen.io/thomas-epps/...

@codepen.io
#CodePenChallenge

"MorphSVG dragon to dove" by Chris Smith

codepen.io/BlogFire/pen...