Ana Tudor

An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don’t blur or get the jaggies.

The whole point of auto-fit and auto-fill is that you aren’t saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

A deep dive into producing an interpolated “gradient” of colors from just two provided colors.

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.