Ana Tudor

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but at least it rhymes. Both the question and this […]

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.

A halftone is a pattern of dots that vary in size and spacing. It’s a printing technique that you normally don’t see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.