CodePen
@codepen.io
December 21, 2025 at 10:16 PM
December 21, 2025 at 4:32 PM
December 18, 2025 at 4:32 PM
Reposted by CodePen
A little blending demo on @codepen.io: codepen.io/thebabydino/...
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
December 18, 2025 at 9:06 AM
A little blending demo on @codepen.io: codepen.io/thebabydino/...
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
Reposted by CodePen
It's 2025 and here's a little @codepen.io demo illustrating the grid stacking concept: codepen.io/thebabydino/...
The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
December 17, 2025 at 4:02 PM
It's 2025 and here's a little @codepen.io demo illustrating the grid stacking concept: codepen.io/thebabydino/...
The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
It's the final #CodePenChallenge of 2025!
We're partying 'til the new year 🎆
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
We're partying 'til the new year 🎆
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
December 16, 2025 at 10:16 PM
It's the final #CodePenChallenge of 2025!
We're partying 'til the new year 🎆
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
We're partying 'til the new year 🎆
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
Reposted by CodePen
Haven't had much time this week, but managed a quick Stranger Things themed @codepen.io. Excited for that S5 Volume 2 Christmas drop!
codepen.io/leannerenard...
codepen.io/leannerenard...
Stranger Things Christmas Lights
Stranger Things S5 Volume 2 Christmas hype!...
codepen.io
December 16, 2025 at 12:39 PM
Haven't had much time this week, but managed a quick Stranger Things themed @codepen.io. Excited for that S5 Volume 2 Christmas drop!
codepen.io/leannerenard...
codepen.io/leannerenard...
Reposted by CodePen
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev
November 29, 2025 at 9:52 PM
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
Reposted by CodePen
📝 New CSS Article!
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
December 15, 2025 at 7:05 PM
📝 New CSS Article!
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
December 13, 2025 at 4:32 PM
Reposted by CodePen
Scroll-triggered animations are coming to Chrome early next year (we've been really excited about this one!) 🥳
Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range.
Learn more ⬇️
Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range.
Learn more ⬇️
December 12, 2025 at 4:32 PM
Scroll-triggered animations are coming to Chrome early next year (we've been really excited about this one!) 🥳
Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range.
Learn more ⬇️
Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range.
Learn more ⬇️
Reposted by CodePen
10 Cool CodePen Demos from November 2025: Cards, whimsical components, shaders, directional aware icons, CSS art, prototypes and experiments with new web features... and more!
alvaromontoro.com/10-cool-code...
#javascript #css #html #gsap #svg #webdev #codepen
alvaromontoro.com/10-cool-code...
#javascript #css #html #gsap #svg #webdev #codepen
10 Cool CodePen demos
10 Cool CodePen demos from November 2025
alvaromontoro.com
December 10, 2025 at 3:31 PM
10 Cool CodePen Demos from November 2025: Cards, whimsical components, shaders, directional aware icons, CSS art, prototypes and experiments with new web features... and more!
alvaromontoro.com/10-cool-code...
#javascript #css #html #gsap #svg #webdev #codepen
alvaromontoro.com/10-cool-code...
#javascript #css #html #gsap #svg #webdev #codepen
Reposted by CodePen
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap. It's also our last guest post of the year!
piccalil.li/blog/why-are...
piccalil.li/blog/why-are...
Why are my view transitions blinking?
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!
piccalil.li
December 11, 2025 at 12:19 PM
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap. It's also our last guest post of the year!
piccalil.li/blog/why-are...
piccalil.li/blog/why-are...
Reposted by CodePen
The mental model for scroll-driven animations: remembering they're the same CSS animations we're used to, but on a different timeline... that's based on scroll and/or view position, not time.
css-tricks.com/creating-scr...
css-tricks.com/creating-scr...
Creating Scroll-Based Animations in Full view() | CSS-Tricks
It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
css-tricks.com
December 10, 2025 at 3:06 PM
The mental model for scroll-driven animations: remembering they're the same CSS animations we're used to, but on a different timeline... that's based on scroll and/or view position, not time.
css-tricks.com/creating-scr...
css-tricks.com/creating-scr...
December 10, 2025 at 4:32 PM
Reposted by CodePen
Turn any profile picture into a stunning piece of art.
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
December 10, 2025 at 2:12 PM
Turn any profile picture into a stunning piece of art.
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
Reposted by CodePen
My creation for this weeks @codepen.io challenge, something that evokes a feeling of wintertime coziness.
There is nowhere I would rather be in the middle of Winter than curled up with a good book and a cup of tea...! 📖 🤎
codepen.io/GemmaCroad/p...
There is nowhere I would rather be in the middle of Winter than curled up with a good book and a cup of tea...! 📖 🤎
codepen.io/GemmaCroad/p...
CodePenChallenge: Cozy Winter
...
codepen.io
December 9, 2025 at 1:47 AM
My creation for this weeks @codepen.io challenge, something that evokes a feeling of wintertime coziness.
There is nowhere I would rather be in the middle of Winter than curled up with a good book and a cup of tea...! 📖 🤎
codepen.io/GemmaCroad/p...
There is nowhere I would rather be in the middle of Winter than curled up with a good book and a cup of tea...! 📖 🤎
codepen.io/GemmaCroad/p...
Our Winter Wonderland #CodePenChallenge continues!
This week, we make it a cozy winter ☕️
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we make it a cozy winter ☕️
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
December 9, 2025 at 4:32 PM
Our Winter Wonderland #CodePenChallenge continues!
This week, we make it a cozy winter ☕️
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we make it a cozy winter ☕️
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring: srv.buysellads.com/ads/long/x/T...
Reposted by CodePen
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 8, 2025 at 5:08 PM
🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
Reposted by CodePen
Test it out and let us know if it solves your needs!
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
December 5, 2025 at 5:37 PM
Test it out and let us know if it solves your needs!
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Reposted by CodePen
Just a lil snow globe for the start of the festive season ☃️🌨️ codepen.io/leannerenard... @codepen.io
GSAP snow globe
...
codepen.io
December 1, 2025 at 9:41 AM
Just a lil snow globe for the start of the festive season ☃️🌨️ codepen.io/leannerenard... @codepen.io
December 4, 2025 at 10:16 PM
December 4, 2025 at 4:32 PM
December 3, 2025 at 10:16 PM
Reposted by CodePen
Non-square image blur extensions in CSS. @anatudor.bsky.social shares a pattern for wrapping images in a square, padding gaps with a blurred copy, and optionally fading edges into the background for more flexible layouts. #css #webdev
frontendmasters.com/blog/non-squ...
frontendmasters.com/blog/non-squ...
December 3, 2025 at 11:09 AM
Non-square image blur extensions in CSS. @anatudor.bsky.social shares a pattern for wrapping images in a square, padding gaps with a blurred copy, and optionally fading edges into the background for more flexible layouts. #css #webdev
frontendmasters.com/blog/non-squ...
frontendmasters.com/blog/non-squ...