CodePen
@codepen.io
📤 2969
📥 78
📝 263
Build, test, and discover front-end code 💻
https://codepen.io
Support:
https://codepen.io/support
"sort of custom scrollbar element" by Tom Hermans
codepen.io/tomhermans/p...
loading . . .
13 minutes ago
0
2
0
reposted by
CodePen
Álvaro Montoro
1 day ago
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
loading . . .
10 Cool CodePen demos
10 Cool CodePen demos from December 2025
https://alvaromontoro.com/10-cool-codepen-demos/2025/12/
1
11
3
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...
1 day ago
0
0
0
reposted by
CodePen
Ana Tudor
2 days ago
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
0
8
2
reposted by
CodePen
Adrian Roselli, pH0
8 days ago
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
loading . . .
Button as live region
https://cdpn.io/aardrian/debug/WbxvPOd/
1
11
3
reposted by
CodePen
Konstantin Denerz
4 days ago
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
loading . . .
C64 (CSS Shape() )
Commodore logo built with CSS shapes function and conic gradient.
https://codepen.io/editor/konstantindenerz/pen/019b8567-3da5-712c-bf47-00c1bbbca05d
0
14
2
"Untitled" by Neil
codepen.io/NeilSchulz/p...
loading . . .
4 days ago
0
4
0
"Flip Text on Hover (Syntax challenge)" by Chris Bolson
codepen.io/cbolson/pen/...
loading . . .
5 days ago
0
7
1
"Collision detection using style queries plus keyframes" by lee
codepen.io/leemeyer/pen...
loading . . .
5 days ago
0
15
4
"Happy New Year!" by SnailCrusher
codepen.io/Sector22/pen...
loading . . .
6 days ago
0
5
0
"Circle Highlight" by Amit Sheen
codepen.io/amit_sheen/p...
loading . . .
7 days ago
0
6
1
"CSS view() for carousel" by Preethi Sam
codepen.io/rpsthecoder/...
loading . . .
17 days ago
0
8
0
"Abstract Olives" by Holland Blumer
codepen.io/hollandblume...
loading . . .
17 days ago
0
4
1
"Liquid Effect" by Kevin Levron
codepen.io/soju22/pen/m...
loading . . .
20 days ago
0
12
0
reposted by
CodePen
Ana Tudor
20 days ago
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
loading . . .
0
16
4
reposted by
CodePen
Ana Tudor
21 days ago
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
add a skeleton here at some point
0
8
3
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...
22 days ago
0
2
0
reposted by
CodePen
Leanne Renard
22 days ago
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...
loading . . .
Stranger Things Christmas Lights
Stranger Things S5 Volume 2 Christmas hype!...
https://codepen.io/leannerenard/full/YPqJJWx
0
9
3
reposted by
CodePen
Adam Argyle
about 1 month ago
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...
loading . . .
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
https://nerdy.dev/adjust-perceived-typepace-weight-for-dark-mode-without-layout-shift
4
86
19
reposted by
CodePen
CSS by T. Afif
23 days ago
📝 New CSS Article! Learn how I made that responsive list of overlapping images using modern CSS.
css-tricks.com/responsive-l...
A perfect use case for the new sibling-index() and sibling-count() functions.
add a skeleton here at some point
0
13
4
"Global Warming" by Alexandre Vacassin
codepen.io/alexandrevac...
loading . . .
25 days ago
0
8
0
reposted by
CodePen
Una Kravets
26 days ago
Scroll-triggered animations are coming to Chrome early next year (we've been really excited about this one!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range. Learn more ⬇️
add a skeleton here at some point
1
35
8
reposted by
CodePen
Álvaro Montoro
28 days ago
10 Cool CodePen Demos from November 2025: Cards, whimsical components, shaders, directional aware icons, CSS art, prototypes and experiments with new web features... and more!
alvaromontoro.com/10-cool-code...
#javascript
#css
#html
#gsap
#svg
#webdev
#codepen
loading . . .
10 Cool CodePen demos
10 Cool CodePen demos from November 2025
https://alvaromontoro.com/10-cool-codepen-demos/2025/11/
1
6
5
reposted by
CodePen
Piccalilli
27 days ago
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap. It's also our last guest post of the year!
piccalil.li/blog/why-are...
loading . . .
Why are my view transitions blinking?
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!
https://piccalil.li/blog/why-are-my-view-transitions-blinking/
0
17
5
reposted by
CodePen
CSS-Tricks*
28 days ago
The mental model for scroll-driven animations: remembering they're the same CSS animations we're used to, but on a different timeline... that's based on scroll and/or view position, not time.
css-tricks.com/creating-scr...
loading . . .
Creating Scroll-Based Animations in Full view() | CSS-Tricks
It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
https://css-tricks.com/creating-scroll-based-animations-in-full-view/
0
9
2
"Whirling" by yuanchuan
codepen.io/yuanchuan/pe...
loading . . .
28 days ago
0
5
0
reposted by
CodePen
Amit Sheen
28 days ago
Turn any profile picture into a stunning piece of art. Upload your image, adjust the slider, and download your new picture. Enjoy. 😃 🔗 Live on
@codepen.io
:
codepen.io/amit_sheen/f...
loading . . .
0
6
2
reposted by
CodePen
Gemma Croad
30 days ago
My creation for this weeks
@codepen.io
challenge, something that evokes a feeling of wintertime coziness. There is nowhere I would rather be in the middle of Winter than curled up with a good book and a cup of tea...! 📖 🤎
codepen.io/GemmaCroad/p...
loading . . .
CodePenChallenge: Cozy Winter
...
https://codepen.io/GemmaCroad/pen/ByKvVRJ/88016a95aaaec3f1dece7a5c70f2c91f
0
3
1
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...
29 days ago
1
0
0
reposted by
CodePen
Una Kravets
30 days ago
🎉 And we're live! 🎉 We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀 This is a big one! We highlighted 22 new features to help you build better on the web. Check out:
chrome.dev/css-wrapped-2025
loading . . .
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
https://chrome.dev/css-wrapped-2025
2
132
66
reposted by
CodePen
Una Kravets
about 1 month ago
Test it out and let us know if it solves your needs! Use the experimental-web-platform-features flag in Chrome 142+ Open questions: - Should the last line of a paragraph be scaled? - Is the current line-height behavior as expected? - Should it scale non-text parts such as inline images together?
add a skeleton here at some point
1
37
4
reposted by
CodePen
Leanne Renard
about 1 month ago
Just a lil snow globe for the start of the festive season ☃️🌨️
codepen.io/leannerenard...
@codepen.io
loading . . .
GSAP snow globe
...
https://codepen.io/leannerenard/full/OPNQNpg
2
16
5
"World Clock Slider" by Jon Kantner
codepen.io/jkantner/pen...
loading . . .
about 1 month ago
0
12
0
"Chrome: CSS Scroll with @function" by pimskie
codepen.io/pimskie/pen/...
loading . . .
about 1 month ago
0
16
3
"macOS dock effect" by GSAP
codepen.io/GreenSock/pe...
loading . . .
about 1 month ago
0
5
0
reposted by
CodePen
Web Standards
about 1 month ago
Non-square image blur extensions in CSS.
@anatudor.bsky.social
shares a pattern for wrapping images in a square, padding gaps with a blurred copy, and optionally fading edges into the background for more flexible layouts.
#css
#webdev
frontendmasters.com/blog/non-squ...
0
4
2
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...
about 1 month ago
0
0
0
reposted by
CodePen
CSS-Tricks*
about 1 month ago
This is what happens when you let someone like Lee Meyer go nuts with a new CSS feature.
css-tricks.com/scrollytelli...
www.youtube.com/watch?v=cseY...
loading . . .
scrollytelling
YouTube video by HerobrineGaming
https://www.youtube.com/watch?v=cseY_nbKHaw&si=WRvCfSVXWFiQfw-A
0
4
2
reposted by
CodePen
Andy Bell
about 1 month ago
I've really struggled with the new colours stuff in CSS but editing this series for Kevin has instilled a confidence I never thought I'd had. I'm even more convinced that designers need to be getting into CSS as a serious tool.
add a skeleton here at some point
1
21
6
reposted by
CodePen
Ana Tudor
about 1 month ago
I made an interactive demo to illustrate the `contain` vs. `cover` values. You can play with picking various combinations of box and actual image aspect ratios. Live demo on
@codepen.io
:
codepen.io/thebabydino/...
#CSS
loading . . .
0
15
4
"Bad Handwriting" byJosh Werner
codepen.io/joshwerner/p...
about 1 month ago
0
5
1
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...
loading . . .
CodePen
©2025 CodePen
https://codepen.io/challenges/2025/november/4
about 1 month ago
0
3
0
"CSS <color-input> Color Picker" by Adam Argyle
codepen.io/argyleink/pe...
loading . . .
about 1 month ago
0
13
2
reposted by
CodePen
CSS by T. Afif
about 1 month ago
An interactive demo:
codepen.io/t_afif/full/...
via
@codepen.io
add a skeleton here at some point
0
7
2
reposted by
CodePen
Álvaro Montoro
about 1 month ago
An article about triangles and CSS. I have always said that using borders to draw triangles with CSS is a hacky solution and shouldn't be used... but there are exceptions. Spoiler alert: they involve logical properties.
alvaromontoro.com/blog/68086/d...
#css
#html
#webdev
loading . . .
Drawing Triangles with CSS Using Borders... an Exception
A long time ago, I wrote an article about drawing triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided. In this article, I revisit a ...
https://alvaromontoro.com/blog/68086/drawing-triangles-with-css-using-borders-an-exception
1
7
5
"ASCII Glitch Ripple Hover Effect" by Bastou
codepen.io/erevan/pen/M...
loading . . .
about 1 month ago
0
10
1
reposted by
CodePen
Patrick Brosset
about 2 months ago
color-mix() has now been supported in all major browsers for more than 2 years. It's a really useful way to create a bunch of colors from just one color. Now is time to take a look and use it in your projects! Docs:
developer.mozilla.org/en-US/docs/W...
Demo:
patrickbrosset.com/lab/2024-02-...
0
32
11
reposted by
CodePen
paul デジタルアーティスト
about 2 months ago
Video demo- pretty snappy on the mouse response
#rpi
#glsl
#diy
#shader
loading . . .
3
10
1
reposted by
CodePen
Sunkanmi Fafowora
about 2 months ago
Yepeeeeee!!!
frontendmasters.com/blog/how-to-...
loading . . .
How to Create 3D Images in CSS with the Layered Pattern
Repeat the same content over and over on top of each other, and you can move each of them just a smidge in 3D space creating the illusion of shape.
https://frontendmasters.com/blog/how-to-create-3d-images-in-css-with-the-layered-pattern/
0
2
1
reposted by
CodePen
Álvaro Montoro
about 2 months ago
Not in Powerpoint, but here's an unfinished collection of flags drawn in CSS using a single HTML element:
codepen.io/alvaromontor...
#css
#html
#webdev
add a skeleton here at some point
0
12
1
Load more
feeds!
log in