CodePen
@codepen.io
February 14, 2026 at 10:16 PM
February 14, 2026 at 4:33 PM
Reposted by CodePen
How would you create such a sliding glow effect on :hover? Trivial with corner-shape, but what about making it work cross-browser now?
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
January 14, 2026 at 5:40 PM
How would you create such a sliding glow effect on :hover? Trivial with corner-shape, but what about making it work cross-browser now?
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
February 11, 2026 at 4:32 PM
The "Colors" CodePen Challenge continues!
This week, we're building color palettes 🎨
codepen.io/challenges/2...
This week, we're building color palettes 🎨
codepen.io/challenges/2...
February 10, 2026 at 5:57 PM
The "Colors" CodePen Challenge continues!
This week, we're building color palettes 🎨
codepen.io/challenges/2...
This week, we're building color palettes 🎨
codepen.io/challenges/2...
February 10, 2026 at 4:32 PM
Reposted by CodePen
Can we make pie chart that's semantic, written with flexible markup, and avoids using expensive JavaScript libraries? @monknow.bsky.social takes a noble shot at it. 🥧
css-tricks.com/trying-to-ma...
css-tricks.com/trying-to-ma...
Trying to Make the Perfect Pie Chart in CSS | CSS-Tricks
Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.
css-tricks.com
February 9, 2026 at 5:37 PM
Can we make pie chart that's semantic, written with flexible markup, and avoids using expensive JavaScript libraries? @monknow.bsky.social takes a noble shot at it. 🥧
css-tricks.com/trying-to-ma...
css-tricks.com/trying-to-ma...
February 6, 2026 at 10:16 PM
Reposted by CodePen
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
February 5, 2026 at 8:08 PM
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
Reposted by CodePen
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
February 6, 2026 at 6:05 AM
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
Reposted by CodePen
Do you like the NYT Connections game? Do you like CSS? Then the new comiCSS game is for you! 😊
4Connect: comicss.art/games/8/
#CSS #Game
4Connect: comicss.art/games/8/
#CSS #Game
comiCSS
comiCSS Games: games about CSS. Coded in CSS (mostly).
comicss.art
February 5, 2026 at 2:11 AM
Do you like the NYT Connections game? Do you like CSS? Then the new comiCSS game is for you! 😊
4Connect: comicss.art/games/8/
#CSS #Game
4Connect: comicss.art/games/8/
#CSS #Game
Reposted by CodePen
You have cat to be kitten me right meow... all those divs with all those styles for the frame around the content?! The frame that could be done with two gradient layers?!
Here you go codepen.io/thebabydino/...
Here you go codepen.io/thebabydino/...
February 5, 2026 at 8:34 PM
You have cat to be kitten me right meow... all those divs with all those styles for the frame around the content?! The frame that could be done with two gradient layers?!
Here you go codepen.io/thebabydino/...
Here you go codepen.io/thebabydino/...
Reposted by CodePen
I accidentally nerd-sniped myself and built a quick CodePen to quickly preview how your logo will look in different contexts: codepen.io/phebert/pen/...
January 26, 2026 at 6:13 AM
I accidentally nerd-sniped myself and built a quick CodePen to quickly preview how your logo will look in different contexts: codepen.io/phebert/pen/...
The February CodePen Challenge is on!
This month is all about Color 🎨
First up: Named Colors
codepen.io/challenges/2...
This month is all about Color 🎨
First up: Named Colors
codepen.io/challenges/2...
February 4, 2026 at 5:19 PM
The February CodePen Challenge is on!
This month is all about Color 🎨
First up: Named Colors
codepen.io/challenges/2...
This month is all about Color 🎨
First up: Named Colors
codepen.io/challenges/2...
Reposted by CodePen
February 3, 2026 at 5:26 PM
The No. 1 Most Hearted Pen of 2025 is CodePen Home is Simey's "Neon Glass Context Menu". It's an incredible looking menu, but the usage of it as a right-click style context menu that opens right where you click is a delightful treat.
codepen.io/simeydotme/p...
codepen.io/simeydotme/p...
January 31, 2026 at 4:32 PM
The No. 1 Most Hearted Pen of 2025 is CodePen Home is Simey's "Neon Glass Context Menu". It's an incredible looking menu, but the usage of it as a right-click style context menu that opens right where you click is a delightful treat.
codepen.io/simeydotme/p...
codepen.io/simeydotme/p...
Reposted by CodePen
I made a prototype 8 years ago and I’d love to see what people could do with that idea now, 8 years on..
bell.bz/fun-shadow-c...
bell.bz/fun-shadow-c...
Fun shadow coding challenge
I made a prototype 8 years ago and I’d love to see what people could do with that idea now, 8 years on..
bell.bz
January 30, 2026 at 1:03 PM
I made a prototype 8 years ago and I’d love to see what people could do with that idea now, 8 years on..
bell.bz/fun-shadow-c...
bell.bz/fun-shadow-c...
"Card Beam Animation" from BL/S® Studio would look right at home on any financial tech company that deals with payment processing and the tech behind it. It comes in at No. 2 on the Most Hearted Pens of 2025.
codepen.io/blacklead-st...
codepen.io/blacklead-st...
January 29, 2026 at 10:16 PM
"Card Beam Animation" from BL/S® Studio would look right at home on any financial tech company that deals with payment processing and the tech behind it. It comes in at No. 2 on the Most Hearted Pens of 2025.
codepen.io/blacklead-st...
codepen.io/blacklead-st...
Reposted by CodePen
🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated!
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
January 28, 2026 at 10:03 PM
🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated!
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
Reposted by CodePen
here's a quick codepen with an example:
codepen.io/sturobson/pe...
and here's a recent article:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
codepen.io/sturobson/pe...
and here's a recent article:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
inherit() border radius
...
codepen.io
January 29, 2026 at 7:50 AM
here's a quick codepen with an example:
codepen.io/sturobson/pe...
and here's a recent article:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
codepen.io/sturobson/pe...
and here's a recent article:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Reposted by CodePen
I made a little Pen to show the CSS corner-shape property! It's cool, I hadn't played with it before. My past self trying to make this happen with pseudo-elements is thrilled 😆
codepen.io/cassidoo/pen...
codepen.io/cassidoo/pen...
January 28, 2026 at 4:41 PM
I made a little Pen to show the CSS corner-shape property! It's cool, I hadn't played with it before. My past self trying to make this happen with pseudo-elements is thrilled 😆
codepen.io/cassidoo/pen...
codepen.io/cassidoo/pen...
No. 4 on the Most Hearted Pens of 2025 is "Electric Border" by Bálint Ferenczy, which feels more like something out of a video game UI that of the native web. But native it is, with that classic SVG filter feTurbulence doing some heavy lifting.
codepen.io/BalintFerenc...
codepen.io/BalintFerenc...
January 28, 2026 at 4:32 PM
No. 4 on the Most Hearted Pens of 2025 is "Electric Border" by Bálint Ferenczy, which feels more like something out of a video game UI that of the native web. But native it is, with that classic SVG filter feTurbulence doing some heavy lifting.
codepen.io/BalintFerenc...
codepen.io/BalintFerenc...
It's the final week of the January #CodePenChallenge!
This week, it's Game Over 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's Game Over 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
January 27, 2026 at 10:16 PM
It's the final week of the January #CodePenChallenge!
This week, it's Game Over 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's Game Over 👾
codepen.io/challenges/2...
Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...
Reposted by CodePen
@codepen.io is that wonderful place where you can use hotpink and deeppink in the same view transitions demos.
codepen.io/g12n/full/MY...
#css #JS #animation
codepen.io/g12n/full/MY...
#css #JS #animation
January 25, 2026 at 8:43 AM
@codepen.io is that wonderful place where you can use hotpink and deeppink in the same view transitions demos.
codepen.io/g12n/full/MY...
#css #JS #animation
codepen.io/g12n/full/MY...
#css #JS #animation
No. 6 of the Most Hearted Pens of 2025 is "Bubbles Background Animation" by GlitchWorker featuring some extremely soft bubble elements floating around a background. The softness is achieved with a soft gradient *and* CSS filter blurring *and* SVG blurring.
codepen.io/glitchworker...
codepen.io/glitchworker...
Bubbles Background Animation
Bubbles Background Animation...
codepen.io
January 25, 2026 at 4:32 PM
No. 6 of the Most Hearted Pens of 2025 is "Bubbles Background Animation" by GlitchWorker featuring some extremely soft bubble elements floating around a background. The softness is achieved with a soft gradient *and* CSS filter blurring *and* SVG blurring.
codepen.io/glitchworker...
codepen.io/glitchworker...