MIN / MAX Card Builder Pro An interactive UI generator exploring min and max across the front-end stack. Uses HTML min/max attributes, CSS clamp() and minmax (), and JavaScript M...

🎛️ New CodePen Challenge entry

Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()

Pick a preset, tweak the card, launch the style, and copy the CSS.

#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...

ZIM ColorPicker and Contrast Text - for CodePen New Colors Challenge Here we show the ZIM ColorPicker that changes the frames color and toBW method which adds contrast black or white based on a color. ZIM provides JavaS...

codepen.io/zimjs/pen/Kw... here we show the ZIM ColorPicker and text that will change to black or white depending on color picked. For the @codepen.io #CodePenChallenge for #NewColors

OKLCH Hue Wheel ...

Oklch Hue Wheel for this weeks #codepenchallenge: codepen.io/stoumann/pen...

17-02-2026 cpc-color-mix-blend Using blend, add and blur to create a strange plasma effect...

codepen.io/megamitts/pe...

#codepenchallenge #p5js #processing #つぶやきProcessing

A Color Carousel for the @codepen.io #CodePenChallenge for #NamedColors - check it out here codepen.io/zimjs/full/w...

Thanks
@codepen.io for the fun #CodePenChallenge for Game Over - here is ZIM at 29% html and css (again, again, again...)

codepen.io/zimjs/full/x...

Named colours values The list of named colors can be displayed as a table (usefull to compare values) / cards (demostrate how to use "colors notable" values for border shad...

CSS named colours (compare & sort) @codepen.io #codepenchallenge #cpc-named-colors #relative-color-syntax
codepen.io/dmsr/pen/Kwz...

Web Cam Puzzle - for CodePen Challenge Puzzle Play Here we use the ZIM Scrambler on a Web Cam snapshot - how fun! Love coding in ZIM on the Canvas. ZIM provides JavaScript conveniences, components and...

Fun @codepen.io #CodePenChallenge for Puzzle Play!

codepen.io/zimjs/pen/By...

Untitled ...

codepen.io/SSCROW88/pen... #codepenchallenge

Close up of the 'Game Over' screen from the arcade game Pac-Man.

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...

A collection of fine wooden and metal puzzles and mazes displayed on a blue cloth.

The January #CodePenChallenge continues!
This week, we're playing with puzzles 🧩

codepen.io/challenges/2...

Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/T...

In an arcade, a guy stands leaning against the cabinet of a vintage video game. He grasps his hair in his hands, seemingly anguished by the game 'Lazy Climber'.

The January #CodePenChallenge continues!
This week, it's time for some cheat codes 🎮

codepen.io/challenges/2...

Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...

Can you solve the Vault? A fun @codepen.io #CodePenChallenge for Cheat Codes.

codepen.io/zimjs/pen/og...

Other vaults are at zimjs.com/examples

#ZIMjs

<location-input> Experimental UI for a location input (web component/vanilla javascript) with light and dark mode support....

Made a pen for this week’s #CodePenChallenge (“a pen that starts with the press of a button”) that is a UI for a location input.

This uses a couple of custom elements I’ve built before (map-picker and lazy-modal) and a technique I’m developing for co-locating css/js/html files in web components.

Close up of a Super Nintendo controller.

New Year, New #CodePenChallenge!
This month, we press start on 2026 with prompts inspired by video games 👾

codepen.io/challenges/2...

Thanks @RedisInc for sponsoring: srv.buysellads.com/ads/long/x/T...

Ringo Dingo - for Code Pen Press Start Challenge with ZIM Here we present a fancy START button then let you play a challenging game! Coding in ZIM is so much fun! ZIM provides JavaScript conveniences, compon...

It's a new year @codepen.io - the first #CodePenChallenge is a START BUTTON for a game! Woot - check it out.. we even made the game - took an hour or two to make with ZIM

codepen.io/zimjs/pen/YP...

#ZIMjs

Screenshot of linked demo: a "Summon Satan!" button.

So this week's #CodePenChallenge is a Pen that starts with pressing a button.

Try mine... if you dare...

codepen.io/thebabydino/...

@codepen.io

#CSS #SVG

This 🎄got picked by @CodePen😊
My last pen of 2025 for the final #codepenchallenge 🧑🏻‍💻
Happy holidays💙
codepen.io/HighFlyer910...

The hands of two people hold sparklers side by side. In the distance, we see the twilight horizon.

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...

CodePen Present! For the CodePen Challenge Until Next Year! Here we feature the ZIM Emitter for a surprise present! Thanks CodePen for all you do. And happy holidays, all codepen peeps! ZIM provides JavaScrip...

Check out

codepen.io/zimjs/pen/xb...

Thanks @codepen.io for all the #CodePenChallenge fun this year.

#ZIMjs

Interactive Snow Scene - for CodePen Challenge Snow and Ice Here we use the ZIM Blob to let users change a snowy hill scene with Beziers. So fun working in ZIM on the JavaScript Canvas - try it out. We have ma...

codepen.io/zimjs/pen/zx... - fun doing this @codepen.io #CodePenChallenge for snow and ice - here you can make a snowy hill scene and save it.

A fireplace with a glowing fire going, shown from the POV of a person lounging on a couch across the room. They're wearing cozy knit socks.

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...

A closeup of the pretty leafy pattern in a light frost.

The December #CodePenChallenge is on!
This month, it's a Winter Wonderland ☃️
codepen.io/challenges/2...
Thanks @MongoDB for sponsoring! srv.buysellads.com/ads/long/x/T...

Sequential animations with sibling-index() CSS function.

codepen.io/armanb/pen/v... via @codepen.io

#codepenchallenge

It's the final week of the November #CodePenChallenge!
This week, it's time to bring your favorite new CSS feature to the table 🧑‍🌾
codepen.io/challenges/2...

Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...

Timeline of HTML - Grid with sibling-index Take an ordered list and make it a responsive timeline. All the data is from https://en.wikipedia.org/wiki/HTML An update of the old version https://co...

For the cpc-css-harvest #CodePenChallenge I reworked my old responsive timeline of HTML
@CodePen to use sibling-index() codepen.io/vcurd/pen/Wb...

CSS if() Time Travel Theme Demo ...

Fun @codepen.io November challenge using the latest experimental CSS if() function to create a small time travel theme page.

codepen.io/diractions/p...

#css #codepenchallenge

The New CSS #CodePenChallenge continues!
This week, we're building with the new CSS `if()` function & custom functions 💻

codepen.io/challenges/2...

Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...

CSS if() Function Example A simple use case of the CSS if() function for this week’s CodePen challenge....

A simple use case of the CSS if() function for this week’s @codepen.io challenge.

codepen.io/armanb/pen/Y...

#CSS #codepenchallenge