CodePen
@codepen.io
#8 in the Most Hearted Pens of 2025 is NIDAL's "Card Carousel", a classy take on showcasing a team of people. Nobody is visiting a page with this UI on it and not absolutely clicking through it.
codepen.io/Nidal95/pen/...
codepen.io/Nidal95/pen/...
January 21, 2026 at 10:16 PM
#8 in the Most Hearted Pens of 2025 is NIDAL's "Card Carousel", a classy take on showcasing a team of people. Nobody is visiting a page with this UI on it and not absolutely clicking through it.
codepen.io/Nidal95/pen/...
codepen.io/Nidal95/pen/...
Coming in at #9 on the Top Hearted Pens of 2025 is Filip Zrnzevic's "❍ Circular Animations Set N°2". It features 10 dot-based designs, any of which could be an elaborate loader design. They are done with animated
January 21, 2026 at 4:32 PM
Coming in at #9 on the Top Hearted Pens of 2025 is Filip Zrnzevic's "❍ Circular Animations Set N°2". It features 10 dot-based designs, any of which could be an elaborate loader design. They are done with animated
The January #CodePenChallenge continues!
This week, we're playing with puzzles 🧩
codepen.io/challenges/2...
Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/T...
This week, we're playing with puzzles 🧩
codepen.io/challenges/2...
Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/T...
January 21, 2026 at 4:25 PM
The January #CodePenChallenge continues!
This week, we're playing with puzzles 🧩
codepen.io/challenges/2...
Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/T...
This week, we're playing with puzzles 🧩
codepen.io/challenges/2...
Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/T...
#10 on the Top Pens of 2025 is Jhey's Dynamic Toggles. These are semantic radio inputs and labels, with most of the design and interactivity in CSS. Little bonus JavaScript View Transition in use when the inputs change to morph those sizes and positions.
codepen.io/2025/popular...
codepen.io/2025/popular...
January 20, 2026 at 10:16 PM
#10 on the Top Pens of 2025 is Jhey's Dynamic Toggles. These are semantic radio inputs and labels, with most of the design and interactivity in CSS. Little bonus JavaScript View Transition in use when the inputs change to morph those sizes and positions.
codepen.io/2025/popular...
codepen.io/2025/popular...
slideVars: automatic detection and controls for your CSS custom properites.
codepen.github.io/slideVars/
codepen.github.io/slideVars/
January 20, 2026 at 4:32 PM
slideVars: automatic detection and controls for your CSS custom properites.
codepen.github.io/slideVars/
codepen.github.io/slideVars/
January 19, 2026 at 4:32 PM
Reposted by CodePen
Since posting this, I added 3 more 😅
You can check them out on this collection on CodePen: codepen.io/collection/G...
Warning: some of them involve flashing lights or real/perceived motion that could trigger reactions.
You can check them out on this collection on CodePen: codepen.io/collection/G...
Warning: some of them involve flashing lights or real/perceived motion that could trigger reactions.
January 15, 2026 at 12:19 PM
Since posting this, I added 3 more 😅
You can check them out on this collection on CodePen: codepen.io/collection/G...
Warning: some of them involve flashing lights or real/perceived motion that could trigger reactions.
You can check them out on this collection on CodePen: codepen.io/collection/G...
Warning: some of them involve flashing lights or real/perceived motion that could trigger reactions.
The January #CodePenChallenge continues!
This week, it's time for some cheat codes 🎮
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's time for some cheat codes 🎮
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
January 13, 2026 at 10:16 PM
The January #CodePenChallenge continues!
This week, it's time for some cheat codes 🎮
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's time for some cheat codes 🎮
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
January 12, 2026 at 10:16 PM
Reposted by CodePen
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 10, 2026 at 4:32 PM
Reposted by CodePen
📢 New article!
Beyond the Mouse: Animating with Mobile Accelerometers
If you want to make mobile interfaces feel more alive, I would love for you to take a look.
🔗 frontendmasters.com/blog/beyond-...
* For the full experience, I highly recommend reading it on a mobile device.
@frontendmasters.com
Beyond the Mouse: Animating with Mobile Accelerometers
If you want to make mobile interfaces feel more alive, I would love for you to take a look.
🔗 frontendmasters.com/blog/beyond-...
* For the full experience, I highly recommend reading it on a mobile device.
@frontendmasters.com
Beyond the Mouse: Animating with Mobile Accelerometers
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
frontendmasters.com
January 9, 2026 at 2:49 PM
📢 New article!
Beyond the Mouse: Animating with Mobile Accelerometers
If you want to make mobile interfaces feel more alive, I would love for you to take a look.
🔗 frontendmasters.com/blog/beyond-...
* For the full experience, I highly recommend reading it on a mobile device.
@frontendmasters.com
Beyond the Mouse: Animating with Mobile Accelerometers
If you want to make mobile interfaces feel more alive, I would love for you to take a look.
🔗 frontendmasters.com/blog/beyond-...
* For the full experience, I highly recommend reading it on a mobile device.
@frontendmasters.com
Reposted by CodePen
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.
Once again they SHOULD NOT be allowing me to cook.
codepen.io/Wilto/live/V...
Once again they SHOULD NOT be allowing me to cook.
codepen.io/Wilto/live/V...
Mega Man 2 (US) Intro Text
...
codepen.io
January 8, 2026 at 4:45 PM
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.
Once again they SHOULD NOT be allowing me to cook.
codepen.io/Wilto/live/V...
Once again they SHOULD NOT be allowing me to cook.
codepen.io/Wilto/live/V...
January 7, 2026 at 4:32 PM
Reposted by CodePen
10 Cool @codepen.io demos from December 2025: alvaromontoro.com/10-cool-code...
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
10 Cool CodePen demos
10 Cool CodePen demos from December 2025
alvaromontoro.com
January 6, 2026 at 6:58 AM
10 Cool @codepen.io demos from December 2025: alvaromontoro.com/10-cool-code...
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!
#css #javascript #html #webdev #newsletter
New Year, New #CodePenChallenge!
This month, we press start on 2026 with prompts inspired by video games 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This month, we press start on 2026 with prompts inspired by video games 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
January 6, 2026 at 4:32 PM
New Year, New #CodePenChallenge!
This month, we press start on 2026 with prompts inspired by video games 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This month, we press start on 2026 with prompts inspired by video games 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
Reposted by CodePen
So this week's #CodePenChallenge is a Pen that starts with pressing a button.
Try mine... if you dare...
codepen.io/thebabydino/...
@codepen.io
#CSS #SVG
Try mine... if you dare...
codepen.io/thebabydino/...
@codepen.io
#CSS #SVG
January 5, 2026 at 5:13 PM
So this week's #CodePenChallenge is a Pen that starts with pressing a button.
Try mine... if you dare...
codepen.io/thebabydino/...
@codepen.io
#CSS #SVG
Try mine... if you dare...
codepen.io/thebabydino/...
@codepen.io
#CSS #SVG
Reposted by CodePen
I’m _not_ saying to never put a live region in / on a button, but I _am_ saying it may not (will not) perform as you want.
cdpn.io/aardrian/deb...
Maybe try a ‘Multi-Function Button’ instead.
adrianroselli.com/2021/01/mult...
#HTML #ARIA #accessibility #a11y
cdpn.io/aardrian/deb...
Maybe try a ‘Multi-Function Button’ instead.
adrianroselli.com/2021/01/mult...
#HTML #ARIA #accessibility #a11y
Button as live region
cdpn.io
December 30, 2025 at 6:00 PM
I’m _not_ saying to never put a live region in / on a button, but I _am_ saying it may not (will not) perform as you want.
cdpn.io/aardrian/deb...
Maybe try a ‘Multi-Function Button’ instead.
adrianroselli.com/2021/01/mult...
#HTML #ARIA #accessibility #a11y
cdpn.io/aardrian/deb...
Maybe try a ‘Multi-Function Button’ instead.
adrianroselli.com/2021/01/mult...
#HTML #ARIA #accessibility #a11y
Reposted by CodePen
The Commodore logo built with pure CSS.
Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨
📺 Demo on @codepen.io :
codepen.io/editor/konst...
#C64 #CSS #RetroComputing #C64U #Commodore #webdev
Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨
📺 Demo on @codepen.io :
codepen.io/editor/konst...
#C64 #CSS #RetroComputing #C64U #Commodore #webdev
C64 (CSS Shape() )
Commodore logo built with CSS shapes function and conic gradient.
codepen.io
January 3, 2026 at 10:51 PM
The Commodore logo built with pure CSS.
Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨
📺 Demo on @codepen.io :
codepen.io/editor/konst...
#C64 #CSS #RetroComputing #C64U #Commodore #webdev
Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨
📺 Demo on @codepen.io :
codepen.io/editor/konst...
#C64 #CSS #RetroComputing #C64U #Commodore #webdev
January 3, 2026 at 10:16 PM
January 2, 2026 at 4:32 PM
January 2, 2026 at 1:48 PM
January 1, 2026 at 4:32 PM
December 31, 2025 at 10:16 PM
December 21, 2025 at 10:16 PM