CodePen
LightNews LightNews
banner
codepen.io
CodePen
@codepen.io
3K followers 78 following 270 posts
Build, test, and discover front-end code 💻
https://codepen.io

Support: https://codepen.io/support
Posts Replies Media Videos
codepen.io
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...
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'.
January 13, 2026 at 10:16 PM
codepen.io
"Parametric Spider" by Fabio Ottaviani

codepen.io/supah/pen/vY...
January 12, 2026 at 10:16 PM
Reposted by CodePen
chriscoyier.net
Made a lil' library:
codepen.github.io/slideVars/

Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM
codepen.io
"Text frame border animation rotation" by Fernando Cohen

codepen.io/designfenix/...
January 10, 2026 at 4:32 PM
Reposted by CodePen
amitsheen.bsky.social
📢 New article!
Beyond the Mouse: Animating with Mobile Accelerometers

If you want to make mobile interfaces feel more alive, I would love for you to take a look.

🔗 frontendmasters.com/blog/beyond-...

* For the full experience, I highly recommend reading it on a mobile device.
@frontendmasters.com
Beyond the Mouse: Animating with Mobile Accelerometers
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
frontendmasters.com
January 9, 2026 at 2:49 PM
Reposted by CodePen
wil.to
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

Once again they SHOULD NOT be allowing me to cook.

codepen.io/Wilto/live/V...
Mega Man 2 (US) Intro Text
...
codepen.io
January 8, 2026 at 4:45 PM
codepen.io
"sort of custom scrollbar element" by Tom Hermans

codepen.io/tomhermans/p...
January 7, 2026 at 4:32 PM
Reposted by CodePen
alvaromontoro.com
10 Cool @codepen.io demos from December 2025: alvaromontoro.com/10-cool-code...

Videos with filters, shaders, galleries, realistic light with CSS, experiments with latest CSS properties, animations, calendars... and more!

#css #javascript #html #webdev #newsletter
10 Cool CodePen demos
10 Cool CodePen demos from December 2025
alvaromontoro.com
January 6, 2026 at 6:58 AM
codepen.io
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...
Close up of a Super Nintendo controller.
January 6, 2026 at 4:32 PM
Reposted by CodePen
anatudor.bsky.social
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
Screenshot of linked demo: a "Summon Satan!" button.
January 5, 2026 at 5:13 PM
Reposted by CodePen
aardrian.bsky.social
I’m _not_ saying to never put a live region in / on a button, but I _am_ saying it may not (will not) perform as you want.
cdpn.io/aardrian/deb...

Maybe try a ‘Multi-Function Button’ instead.
adrianroselli.com/2021/01/mult...

#HTML #ARIA #accessibility #a11y
Button as live region
cdpn.io
December 30, 2025 at 6:00 PM
Reposted by CodePen
konstantindenerz.bsky.social
The Commodore logo built with pure CSS.
Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨

📺 Demo on @codepen.io :
codepen.io/editor/konst...

#C64 #CSS #RetroComputing #C64U #Commodore #webdev
C64 (CSS Shape() )
Commodore logo built with CSS shapes function and conic gradient.
codepen.io
January 3, 2026 at 10:51 PM
codepen.io
"Untitled" by Neil

codepen.io/NeilSchulz/p...
January 3, 2026 at 10:16 PM
codepen.io
"Flip Text on Hover (Syntax challenge)" by Chris Bolson

codepen.io/cbolson/pen/...
January 2, 2026 at 4:32 PM
codepen.io
"Collision detection using style queries plus keyframes" by lee

codepen.io/leemeyer/pen...
January 2, 2026 at 1:48 PM
codepen.io
"Happy New Year!" by SnailCrusher

codepen.io/Sector22/pen...
January 1, 2026 at 4:32 PM
codepen.io
"Circle Highlight" by Amit Sheen

codepen.io/amit_sheen/p...
December 31, 2025 at 10:16 PM
codepen.io
"CSS view() for carousel" by Preethi Sam

codepen.io/rpsthecoder/...
December 21, 2025 at 10:16 PM
codepen.io
"Abstract Olives" by Holland Blumer

codepen.io/hollandblume...
December 21, 2025 at 4:32 PM
codepen.io
"Liquid Effect" by Kevin Levron

codepen.io/soju22/pen/m...
December 18, 2025 at 4:32 PM
Reposted by CodePen
anatudor.bsky.social
A little blending demo on @codepen.io: codepen.io/thebabydino/...

If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...

#CSS
December 18, 2025 at 9:06 AM
Reposted by CodePen
anatudor.bsky.social
It's 2025 and here's a little @codepen.io demo illustrating the grid stacking concept: codepen.io/thebabydino/...

The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
Screenshot showing a card with a DevTools grid overlay. This grid has 1 column and 3 rows. On the first row, we have two buttons stacked on top of an image. We can see the image fills the entire grid cell, while the buttons are placed in opposing cell corners (top right and bottom left). On the next rows, we have the card title and a brief description. Relevant CSS: ``` .product-card { display: grid; grid-gap: 1em; /* stack all images & buttons in the same grid area * at the intersection between 1st row & 1st col */ img, button { grid-area: 1/ 1 } /* place cart & fave buttons in opposing corners */ .cart { place-self: end start } .fave { place-self: start end } } ```
December 17, 2025 at 4:02 PM
codepen.io
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...
The hands of two people hold sparklers side by side. In the distance, we see the twilight horizon.
December 16, 2025 at 10:16 PM
Reposted by CodePen
leannerenard.co.uk
Haven't had much time this week, but managed a quick Stranger Things themed @codepen.io. Excited for that S5 Volume 2 Christmas drop!

codepen.io/leannerenard...
Stranger Things Christmas Lights
Stranger Things S5 Volume 2 Christmas hype!...
codepen.io
December 16, 2025 at 12:39 PM
Reposted by CodePen
nerdy.dev
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift

nerdy.dev/adjust-perce...
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev
November 29, 2025 at 9:52 PM