Amit Sheen

I'm sorry, didn’t mean for it to sound like Chrome was the only one driving this. I only highlighted the Chrome update as a signal that the feature is starting to gain traction. I’ve adjusted the article, hope it reads better now.

True, but it still was not very usable. It is still not practical to use it in production, but I am really happy to see it starting to get implemented.

Great work!

And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...

🔗 codepen.io/amit_sheen/p...

Playing with angles is fun! 😀
I'm here if you want to figure out the math together.

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

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

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.

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

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

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.

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

HSL color palette ...

Start with two colors, and add a new color between any two existing ones. You can drag colors around, adjust the HSL, copy it, and delete any color you don't want.

That way you can begin a palette with only two colors and then expand and refine it as needed.

🔗 codepen.io/amit_sheen/f...

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 👇)

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.

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

Thank you! I gained so much insight while writing this, and it was both challenging and rewarding to find a way to explain things in a clear and approachable manner.

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

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.

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()`.

✨ 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()`.

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

Wow! They look amazing.
Great work. 🤯

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

3D Layered Text: Motion and Variations | CSS-Tricks In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole...

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)

Should I try the comprehensive exam? 😜

A challenge indeed.
I do believe there’s a middle ground where we use these tools to build better human spaces online. We don’t need to give up on the tech entirely to show we reject its misuse, we just need to stop taking part in practices that harm the very communities we want to protect.

State of CSS 2025

📣 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? 🤔

I actually agree with you completely, but wouldn’t say I’m "mad about new tech". I enjoy using AI (in moderation), I'm just frustrated by those who misuse it, and disappointed in those who willingly give in to that misuse. Go humans!