"sort of custom scrollbar element" by Tom Hermans codepen.io/tomhermans/p...

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

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

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

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

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

"Untitled" by Neil codepen.io/NeilSchulz/p...

"Flip Text on Hover (Syntax challenge)" by Chris Bolson codepen.io/cbolson/pen/...

"Collision detection using style queries plus keyframes" by lee codepen.io/leemeyer/pen...

"Happy New Year!" by SnailCrusher codepen.io/Sector22/pen...

"Circle Highlight" by Amit Sheen codepen.io/amit_sheen/p...

"CSS view() for carousel" by Preethi Sam codepen.io/rpsthecoder/...

"Abstract Olives" by Holland Blumer codepen.io/hollandblume...

"Liquid Effect" by Kevin Levron codepen.io/soju22/pen/m...

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

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

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

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

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

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

"Global Warming" by Alexandre Vacassin codepen.io/alexandrevac...

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 ⬇️

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

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

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

"Whirling" by yuanchuan codepen.io/yuanchuan/pe...

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

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

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

🎉 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

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?

Just a lil snow globe for the start of the festive season ☃️🌨️ codepen.io/leannerenard... @codepen.io

"World Clock Slider" by Jon Kantner codepen.io/jkantner/pen...

"Chrome: CSS Scroll with @function" by pimskie codepen.io/pimskie/pen/...

"macOS dock effect" by GSAP codepen.io/GreenSock/pe...

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

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

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

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.

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

"Bad Handwriting" byJosh Werner codepen.io/joshwerner/p...

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

"CSS <color-input> Color Picker" by Adam Argyle codepen.io/argyleink/pe...

An interactive demo: codepen.io/t_afif/full/... via @codepen.io

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

"ASCII Glitch Ripple Hover Effect" by Bastou codepen.io/erevan/pen/M...

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

Video demo- pretty snappy on the mouse response #rpi #glsl #diy #shader

Yepeeeeee!!! frontendmasters.com/blog/how-to-...

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