CSS

Do you need it? Not really, custom properties are probably a better bet. But it still has a bit of utility and it’s fun to think about.

Now that we’re starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with is easier.

Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.

These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.

Shadows don’t have to be used for… shadows. Inset shadows can layer over backgrounds and because they are animatable, it’s just another tool for drawing what we want to the page.

Chrome 135 (in Beta as I write, probably stable early April?) will have customizable select elements in it. You opt-in to it in CSS, and once you have, you can go ham on styling regular ol’ <select>, <option>, ‘n’ friends elements. Very progressive-enhancement friendly as a select without custom styling is… fine. It’s interesting and […]

Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.

There is an already-classic @scope demo about theme colors. Let’s recap that and then I’ll show how it relates to any situation with modifier classes. (The @scope rule is a newish feature in CSS that is everywhere-but-Firefox, but is in Interop 2025, so shouldn’t be too long to be decently usable.) There are lots of […]

I love the idea of being able to take a color you already have in CSS, like currentColor, a custom property, or a color pulled from an attr(), and manipulate it. The big examples being darken, lighten, or apply opacity to it for different adjacent elements or states. We have a ton of “newly available” […]

`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.