I was inspired by another amazing animation from Jon Kantner, so I made a pure CSS version. 400 squares, using sibling-index() and sibling-count(), a bunch of trig functions, and some typed arithmetic. (Currently works in Chrome 140+ only) Live demo on @codepen.io: codepen.io/amit_sheen/f...

🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease. I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨ #CSS utilitybend.com/blog/styling...

A couple of days ago I came across Jon Kantner’s excellent color palette generator, and it reminded me that a few years back I built something quite similar (great minds and all that) back when HSL was the hot new thing. (Links in comment 👇)

Big fan of the educational demos in @amitsheen.bsky.social's post here about `offset-path`. frontendmasters.com/blog/the-pat...

✨ The `-path` of Least Resistance (part 2) ✨ From shapes that define boundaries to paths that drive motion. We shift to `offset-path`, where elements no longer get clipped but flow along custom routes. 🤩 🔗 Read and share your thoughts on @frontendmasters.com: frontendmasters.com/blog/the-pat...

The `-path` of Least Resistance (Part 2) This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

✨ New article: The `-Path` of Least Resistance ✨ First part of a series on the power of paths in CSS, kicking off with clip-path. From the basics to functions and syntax, all the way to advanced shape logic. 🔗 Read and share your thoughts on @frontendmasters.com frontendmasters.com/blog/the-pat...

The `-path` of Least Resistance (Part 1) A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

✨ Part three (and final) is out now! ✨ This series has been a deep dive into 3D layered text, and in this part we explore some advanced interactions while making the code cleaner and more dynamic with a touch of JS. 🤩 🔗 Read and share your thoughts on @css-tricks.com css-tricks.com/3d-layered-t...

Alright, we're capping off @amitsheen.bsky.social's CSS-Tricks takeover with the final chapter in his series — this time making fully responsive bulging text that follows your mouse in real time. ✨ css-tricks.com/3d-layered-t...

✨ 3D layered text - Part two is here! ✨ If this series of articles were a meal, this part would definitely be the main course. 😋 19(!) live examples of 3D text animations, and if you want to build them yourself, check it out on @css-tricks.com. 🔗 css-tricks.com/3d-layered-t...

It's still the @amitsheen.bsky.social show over here at CSS-Tricks! Now up: the second piece of his series about 3D text effects... this time with ✨ motion ✨. css-tricks.com/3d-layered-t...

✨ New article! ✨ This time it’s a three-part exploration of 3D layered text. 😎 The first part is all about the basics, from the very first line to text with real depth that feels like it pops off the page. 🤩 Check it out and share your thoughts on @css-tricks.com: 🔗 css-tricks.com/3d-layered-t...

Alright, we're letting @amitsheen.bsky.social take over CSS-Tricks... all week! He's got a three-parter that's a super deep dive into 3D layered text. Part one is all about creating an index of layers for adding depth, and it's full of goodies. css-tricks.com/3d-layered-t...

I'm just loving the fact that we can now create such complex interactions with only a few simple lines of CSS. 🤯 (This demo is from an upcoming article I’m working on)

📣 The State of CSS 2025 results are live! There are some really interesting findings this year! 🤯 And if the Conclusion feels like a love letter to the future of CSS, well… guilty as charged. 😉 🔗 2025.stateofcss.com

Does the new `stretch` keyword in CSS mark the end of `box-sizing: border-box;` in our reset files? 🤔

If you're new to CSS, one of the best ways to make your life easier is to take advantage of all the CSS debugging features in your devtools. To help, I teamed up with @amitsheen.bsky.social to create a free, 5-part beginner course on getting started with them: devtoolsforbeginners.kevinpowell.co

🚨 New Course Alert 🚨 DevTools for Beginners @kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS. 🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co

✨ Been waiting for this one! ✨ 24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count(). Working with multiple elements just got way easier! 🤩 (Currently on Chromium only) 🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

** This animation is 100% linear! ** Sure, there are spheres, curvy lines, and circular motion. Made with a few #CSS animations and some tricky keyframes. But the timing functions? Pure linear easing across the board. 🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

This is the simplest complex animation I’ve ever made (with #CSS). It uses only two animations: a single keyframe to rotate on the Y axis, and another with a simple Y-axis translate. That's it. The trick is knowing how to combine them in a clever way. 😉 🔗 On @codepen.io: codepen.io/amit_sheen/f...

✨ New article! ✨ A few weeks ago, while brainstorming silly things I could do with Scroll Driven Animations, I suddenly remembered that text can be animated too 🤯. That little spark quickly led me to a new idea: a Scroll-Driven Sticky Heading. 🔗 @css-tricks.com: css-tricks.com/scroll-drive...

Scroll-Driven Sticky Header by @amitsheen.bsky.social This is a great example of what happens when you start poking at one new CSS feature and wind up combining it with a few others and find fresh new approaches to common patterns. css-tricks.com/scroll-drive...

Hey Bluesky friends, good news! 📣 Starting next week I’ll be available to take on a new project. Anything frontend that could use a creative touch. Development, consulting, and anything in between. Happy to chat if you have something interesting. Shares would be appreciated! 🙏

Cute Shaking Skull ☺️🤝☠️ (CSS only) Click the skull to shake it. 🥴 Live demo on @codepen.io: codepen.io/amit_sheen/f...

It’s my CodePen Proniversary! 🎉 Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯 Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗

Unbelievable! CSS Master Evans has done it again! The Backrooms, with pure CSS. Amazing. 🤯

Great post on the new CSS corner-shape property from @amitsheen.bsky.social frontendmasters.com/blog/underst...

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse! A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+. 🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

📣 Bluesky, show me your power... I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.

We're ba-ack! 🎉 Get ready to have some serious fun with CSS! @kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩 Want to build awesome games with just CSS? Now's your chance! Join us: courses.kevinpowell.co/css-games-wo... (get 25% off for the next 24 hours)

Me and @amitsheen.bsky.social took a year off from this, but it's back and better than ever! (and 25% off for the next 24 hours) courses.kevinpowell.co/css-games-wo...

When one needs to disconnect a bit from the surrounding reality, one makes a satisfying endless #CSS animation. ♾️ Infinite wheel ☸️ Live demo @codepen.io: codepen.io/amit_sheen/f...

@kevinpowell.co and @bell.bz are both live, at the same time (in different locations). So instead of choosing, I just put them next to each other. My ADHD is happy to have multiple screens. 😂

One of the side topics of this CSS-packed weekend was undoubtedly Origami. And @ichimnetz.com reminded me that I'd done this... thing (what do you call that?!) a few years ago. (just refactored it now a little to use pure CSS) 🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

A #sketchnotes for the talk "Building a Computer with CSS" by @amitsheen.bsky.social‬ at the @cssday.nl #cssday

A couple of balls flying through a box of frames. #CSS only. 🤦 the things I'm doing while procrastinating instead of working on my presentation for #CSSDay next week. 🔗 Live demo @codepen.io: codepen.io/amit_sheen/f...

Inspired by @akiyoshikitaoka.bsky.social, I made this pure #CSS, interactive, single checkbox optical illusion. The straight lines look like they're bulging outwards. Clicking the square changes the effect so that the lines appear to be slanting inwards. On @codepen.io: codepen.io/amit_sheen/f...

Last night I gave a talk on 'things that were once impossible' with pure CSS, and showed how it can be done today. (Easily! 🤯) It’s wild how powerful CSS became, and how much time and effort we can save by simply writing solid CSS that does what it was always meant to do.

✨ New article is live: CSS Spotlight Effect I asked myself what we could do with just the mouse position, and got to this fun simple effect. Hope you enjoy it, and maybe it will spark some new ideas for you too. 😊 🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/css-spo...

Am I late to the party? Today I finally joined you all here on Bluesky, so... here are some flying logo butterflies! 😁 🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...