3D Transforms never render as nicely as I hope. Interesting you can get much nicer rendering on the edges if you fake the volume.
Becomes more of a hassle to make the sides a different colour, which even if you go through has it's own list of rendering problems

#CSS 3D Keys ⌨️
Uses 3d transforms and some simple trigonometry to calculate the sides of each key.
Relative color syntax for the different shades. I had many failed attempts at adding some form of rounding, before compromising with this stylised look
codepen.io/matthewmoret...

Updated my fluid size calculator to now support up to 3 size/viewport pairs! You can even plateau the middle value if needed.
Guaranteed to make the most complicated clamp you've ever used 🗜️
fluidsize.com

'background-repeat: round' ensures we have a whole number of repeats, but causes the gradient to double up with the border on two edges, breaking the effect.
We fix that by moving the lines to a pseudo that we can extend and then clip

I needed a perfectly even background grid, and while @css-only.dev's grid line generator got me 90% of the way there, I made a quick demo of how I made it work properly for my use case.
Demo: codepen.io/matthewmoret...
Gradient Generator: css-shape.com/grid-lines/

A layered split text effect using an svg filter for this weeks
@codepen.io challenge. No duplication, editable text and all that good stuff
codepen.io/matthewmoret...