Amit Sheen
@amitsheen.bsky.social
Experienced web developer, specializing in design systems, animation, and creative coding. Passionate about pushing CSS to its limits.
Posts (mostly) front-of-the-frontend stuff and animations. Don't follow people who post or share about politics.
Posts (mostly) front-of-the-frontend stuff and animations. Don't follow people who post or share about politics.
I’m excited to share that my session from CSS Day is now live on YouTube 🎥
Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍
Would love to hear your thoughts! 😀
🔗 www.youtube.com/watch?v=PFqt...
Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍
Would love to hear your thoughts! 😀
🔗 www.youtube.com/watch?v=PFqt...
Building a Computer with CSS - Amit Sheen - CSS Day 2025
YouTube video by Web Conferences Amsterdam
www.youtube.com
February 13, 2026 at 10:37 AM
I’m excited to share that my session from CSS Day is now live on YouTube 🎥
Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍
Would love to hear your thoughts! 😀
🔗 www.youtube.com/watch?v=PFqt...
Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍
Would love to hear your thoughts! 😀
🔗 www.youtube.com/watch?v=PFqt...
Reposted by Amit Sheen
In case you missed it yesterday, here's @amitsheen.bsky.social building a computer with CSS.
www.youtube.com/watch?v=PFqt...
www.youtube.com/watch?v=PFqt...
Building a Computer with CSS - Amit Sheen - CSS Day 2025
YouTube video by Web Conferences Amsterdam
www.youtube.com
February 12, 2026 at 4:05 PM
In case you missed it yesterday, here's @amitsheen.bsky.social building a computer with CSS.
www.youtube.com/watch?v=PFqt...
www.youtube.com/watch?v=PFqt...
I’m trying to turn my TV into a full-on 3D portal. This is phase one, what do you think? 😎
No, it is not AI. Yes, it’s all done with #CSS perspective.
No, it is not AI. Yes, it’s all done with #CSS perspective.
February 11, 2026 at 5:28 PM
I’m trying to turn my TV into a full-on 3D portal. This is phase one, what do you think? 😎
No, it is not AI. Yes, it’s all done with #CSS perspective.
No, it is not AI. Yes, it’s all done with #CSS perspective.
📣 New Article:
📣 Rethinking “Pixel Perfect”
a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
🔗 www.smashingmagazine.com/2026/01/reth...
@smashingmagazine.com
📣 Rethinking “Pixel Perfect”
a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
🔗 www.smashingmagazine.com/2026/01/reth...
@smashingmagazine.com
three men standing next to each other with the words you keep using that word
ALT: three men standing next to each other with the words you keep using that word
media.tenor.com
January 20, 2026 at 7:35 PM
📣 New Article:
📣 Rethinking “Pixel Perfect”
a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
🔗 www.smashingmagazine.com/2026/01/reth...
@smashingmagazine.com
📣 Rethinking “Pixel Perfect”
a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
🔗 www.smashingmagazine.com/2026/01/reth...
@smashingmagazine.com
Oh yes!
I’m going to use this so much!!!
I’m going to use this so much!!!
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.)
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 14, 2026 at 9:54 AM
Oh yes!
I’m going to use this so much!!!
I’m going to use this so much!!!
📢 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
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
📢 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
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
Kicking off 2026 with WebXR experiments! 🚀 🏀
btw, a year ago I was playing with 2D hand tracking via the webcam and projecting it into 3D using CSS. Now I am waiting for a more solid implementation of the WebXR DOM Overlays Module so I can start layering some CSS on top of it too. 🤣
btw, a year ago I was playing with 2D hand tracking via the webcam and projecting it into 3D using CSS. Now I am waiting for a more solid implementation of the WebXR DOM Overlays Module so I can start layering some CSS on top of it too. 🤣
January 2, 2026 at 11:34 AM
Kicking off 2026 with WebXR experiments! 🚀 🏀
btw, a year ago I was playing with 2D hand tracking via the webcam and projecting it into 3D using CSS. Now I am waiting for a more solid implementation of the WebXR DOM Overlays Module so I can start layering some CSS on top of it too. 🤣
btw, a year ago I was playing with 2D hand tracking via the webcam and projecting it into 3D using CSS. Now I am waiting for a more solid implementation of the WebXR DOM Overlays Module so I can start layering some CSS on top of it too. 🤣
Playing with triangles to create mesh deformation in pure #CSS.
Live demo @codepen.io: codepen.io/amit_sheen/f...
Live demo @codepen.io: codepen.io/amit_sheen/f...
December 22, 2025 at 11:20 AM
Playing with triangles to create mesh deformation in pure #CSS.
Live demo @codepen.io: codepen.io/amit_sheen/f...
Live demo @codepen.io: codepen.io/amit_sheen/f...
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...
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
December 10, 2025 at 2:12 PM
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...
Upload your image, adjust the slider, and download your new picture.
Enjoy. 😃
🔗 Live on @codepen.io: codepen.io/amit_sheen/f...
I saw a few folks posting their FizzBuzz solutions, so I figured I’d make my own pure #CSS version. (No markup)
🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...
🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...
December 6, 2025 at 4:13 PM
I saw a few folks posting their FizzBuzz solutions, so I figured I’d make my own pure #CSS version. (No markup)
🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...
🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...
📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
December 4, 2025 at 8:15 PM
📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
Inspired by Temani’s brilliant work, where he created a box using only `border-radius` and `corner-shape`, I built on his code, played with different angles, and came up with this dynamic demo.
Live demo on @codepen.io: codepen.io/amit_sheen/f...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
September 26, 2025 at 8:23 PM
Inspired by Temani’s brilliant work, where he created a box using only `border-radius` and `corner-shape`, I built on his code, played with different angles, and came up with this dynamic demo.
Live demo on @codepen.io: codepen.io/amit_sheen/f...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
✨ New article ✨
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
September 24, 2025 at 1:04 PM
✨ New article ✨
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
Reposted by Amit Sheen
You know how we can’t calc() numbers with mixed data types? Well, that's changing (Chrome 140) and it might be a bigger deal that @amitsheen.bsky.social describes as "self-aware” CSS.
css-tricks.com/css-typed-ar...
css-tricks.com/css-typed-ar...
CSS Typed Arithmetic | CSS-Tricks
Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.
css-tricks.com
September 24, 2025 at 12:55 PM
You know how we can’t calc() numbers with mixed data types? Well, that's changing (Chrome 140) and it might be a bigger deal that @amitsheen.bsky.social describes as "self-aware” CSS.
css-tricks.com/css-typed-ar...
css-tricks.com/css-typed-ar...
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...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
September 20, 2025 at 12:37 AM
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...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
Reposted by Amit Sheen
🚀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...
I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨
#CSS
utilitybend.com/blog/styling...
Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend
Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.
utilitybend.com
September 12, 2025 at 11:37 AM
🚀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...
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 👇)
(Links in comment 👇)
September 5, 2025 at 10:58 AM
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 👇)
(Links in comment 👇)
Reposted by Amit Sheen
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)
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.
frontendmasters.com
September 3, 2025 at 1:34 PM
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...
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...
August 30, 2025 at 2:18 PM
✨ 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...
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...
Reposted by Amit Sheen
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.
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.
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.
frontendmasters.com
August 30, 2025 at 7:39 AM
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.
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...
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()`.
frontendmasters.com
August 28, 2025 at 9:21 AM
✨ 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...
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...
Reposted by Amit Sheen
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()`.
A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.
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()`.
frontendmasters.com
August 28, 2025 at 7:39 AM
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()`.
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...
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...
August 22, 2025 at 2:48 PM
✨ 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...
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...
Reposted by Amit Sheen
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...
css-tricks.com/3d-layered-t...
August 22, 2025 at 2:08 PM
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...
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...
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...
August 20, 2025 at 3:28 PM
✨ 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...
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...
