Published on

Codepens of the Year 2024

Authors
  • avatar
    Name
    Konrad Persson
    Twitter

CodePens of the Year: Most Liked in 2024

2024 has been an exciting year for front-end design and creativity! From glowing cards to interactive parallax scrolling, here’s a roundup of some of the most liked CodePens this year. These pens capture the magic of design, creativity, and some innovative CSS and JavaScript techniques.


Minmalistic glowing cards with a spotlight effect

![[Minimal-React-Glow-Cards.png]]

How neat is that? The glowing magic of AI generation was a 2024 trend indeed. This pen uses React to create sleek, glowing cards that feel futuristic yet minimal.

[!codepen] Check it out: React Glow Cards


Simple clean Toast Notifications

Who says no to toast? Seriously though, notification styling always comes in handy! This pen makes toast notifications clean, intuitive, and visually appealing.

[!codepen] Check it out: Clean Toast Notifications


Bouncy Image Radio Group

Animations make everything better, right? I had to tweak this one myself to make it even bouncier by removing the user’s reduced motion preference. If you’re like me and love animations on the web (even if not on your OS), you’ll enjoy this.

[!codepen] Check it out: Bouncy Image Radio Group


Fixed Images with Vertical Scrolling Parallax

This one feels simple but is anything but! The coding is intricate, and the result is a beautiful parallax effect as you scroll. It’s interactive and captivating.

[!codepen] Check it out: Vertical Scrolling Parallax


Services Section

Sometimes, you need to make a lot out of a little. This services section design packs a punch even when the content is minimal.

[!codepen] Check it out: Services Section


Wrap-up

These CodePens showcase the best of 2024’s design trends, offering inspiration and practical solutions for developers. Whether you’re a fan of glowing elements, slick animations, or functional layouts, there’s something here for everyone.

Have a favorite CodePen of 2024 that’s not on the list? Share it in the comments!