10 Cool CodePen Demos

August 2025

• oklch + hue rotated background

  • CSS
  • JavaScript
  • HTML

  AstroMash create a colorful slider that changes the background with its value. The animations are smooth, and the implementation is clean and popping. A simple but powerful demo.

  

• "Orchestration" with sibling-index()

  • CSS

  Another educative demo by Una Kravets. This time she showcases the sibling-index() function in CSS, and how it can be used to animated elements at different intervals keeping the code to a minimum.

  

• Rubber banding

  • Vec2
  • JavaScript
  • canvas

  The math involved in calculating the vectors and the movement of each ball, and how they stretch the rubber band, goes way over my head. But Liam Egan makes it look so simple. Amazing.

  

• simple timeline

  • HTML
  • CSS

  Ana Tudor created the prototype for a vertical timeline using HTML and CSS. You can keep adding elements and it will grow nicely, placing content in the corresponding side without overlapping.

  

• Electric Border

  • SVG
  • CSS
  • HTML

  And incredibly impressive demo by Bálint Ferenczy. It uses SVG filters and animations to create this electric (literally) effect to a card's border. It will definitely catch the attention of the visitors.

  

• Light & Shadow Illustration - CSS -NoDiv

  • CSS

  For a CodePen Challenge, Josetxu created a stunning minimalistic view of some buildings. It gives similar vibes as View from the Window at Le Gras by Niépce, but in just 27 lines of CSS.

  

• Orbs N Ringz

  • WebGL
  • JavaScript
  • canvas

  Matthias Hurrle has been in several editions of this list with his 3D animations. This shader is a top one, amazing from the colors to how it was executed.

  

• Retro Breakout

  • JavaScript
  • canvas

  I like seeing old games brought to life using web technologies. This one by NANOUU only has one level, but but it is really fun to play and sure to spark some nostalgia.

  

• Light and shadow

  • GSAP
  • SVG
  • HTML

  Another eye-catching demo part of the light and shadows CodePen challenge. A random hanging mobile will generative each time you load the page, and the perspective will change with the mouse movement. Nice work by inkProjects.

  

• Learn CSS - Counters()

  • CSS
  • HTML

  TIL about counters(). I've used counter() before, but never counters() (it returns a string with the nested values of a counter). This practical and educational demo by the web.dev team showcases it.