With view() style scroll-driven animations, it’s helpful to think about how you want it to work then tweak the ranges toward that goal.

You want to hide an interactive element that you don’t need anymore after JavaScript loads/runs. Can you do it without a “flash” or layout shift?

Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.

Don’t run! There is powerful stuff to learn here through interactive demos.

There are a ton more @media queries than “width” and “prefers-reduced-motion”. Let’s have a long, along with use-cases.

A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn’t.

If you thought 2024 was packed with amazing new CSS, well, you’re right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.