[joshwcomeau]

Author here — yeah, so my goal with 200% was to make the code as comprehensible as possible. My actual glassy header does something quite similar to what you’re suggesting, but that also raises the bar quite a bit for how much CSS you need to know in order to understand this post.

I like making things like this copy/pasteable, rather than NPM-installable, so that more experienced developers can make tweaks like the one you suggest.

[vinnymac]

Your effort to make these posts consumable by the masses doesn’t go unnoticed. It’s clear you put a great deal of work into them, and the quality you achieve raises the bar in many ways for what to expect when learning about the web. If only all educational materials on MDN could reach these heights.

[chrismorgan]

Honestly, I feel that `bottom: -32px` and `calc(100% - 32px)` might be easier to understand than `height: 200%` and `50%`. (Yeah, for early teaching I might step back from using `inset`.) It does require the one extra concept of calc(), but it’s exact and feels slightly more easily explicable than how 50% of 200% is back to 100%. The fact that the number 32 would be present in both makes it easier to track, whereas the fact that 200% and 50% are inverses is pretty easily overlooked.