10 Cool CodePen Demos (March 2026)

Source: Dev.to

2026 F1 Drivers Custom Select using appearance: base-select

Chris Bolson crafted one of the most impressive custom selects I’ve seen. It doesn’t even look like a native HTML . The UX is smooth and clean—definitely worth trying.

Custom Select by Temani Afif

Temani Afif’s custom select also breaks away from the typical control. It’s playful: shoot the fruit to explode it and make your selection. A fun experiment and a must‑try.

Demo of lighter operator in SVGFECompositeElement

Safari’s team recently added support for the feComposite element. Jen Simmons created this demo to showcase how it works (the glow around the circles wouldn’t appear without the new property).

Neon Iridescent Ribbon using p5.js

Margarita made a relaxing animation of a colorful ribbon moving across the screen. The demo lets you update the settings on top and see the changes in real time—great for learning p5.js.

Untitled (Opposite Directions CodePen challenge)

As part of the “opposite directions” challenge, Shivani coded an entertaining animation where two teams of figures (Cyan and Magenta) clash in the center while trying to reach the opposite corner. Watching the characters move and guessing which team will win is a lot of fun.

CSS position: sticky for Single‑Axis Scroll Containers

Bramus demonstrates a new Chrome Canary feature that simplifies keeping headers or columns sticky in large data tables. This could be a game‑changer for handling massive tables.

CodePen TV – 100 % Pure CSS

Ben Evans shares another stunning piece of CSS art: a fully interactive TV set built entirely with HTML and CSS. Explore the illustration and play with all the buttons.

Using sibling-index() to hue‑shift / increment opacity in SVG paths

Many Nicole’s illustration shows how to change SVG colors using relative colors and the new sibling-index() function to update the hue of the lines forming a blob.

The CSS if() Function

Rob created a tutorial on the CSS if() function, which enables inline conditionals in stylesheets. The tutorial includes demos and a knowledge test—an excellent resource for learning this new feature.

Gekke zoom dingen

Cyd Stumpel’s “crazy” zoom demo combines scroll‑driven animations with scaling. The effect resembles a parallax but feels distinct and cool—a great idea to borrow for future projects.