Gradients

We look at a couple of ways to essentially draw a little square dot in a slightly larger area and let it repeat, giving us a nice dotted background effect.

I ran across this website Very Good Components the other day and thought it was a neat idea to have a design gallery that wasn’t whole websites but individual components. They actually went a bit further and have configurable code for them. Here’s a Glowing Gradient Divider. I decided to remake it as an <hr> […]

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 […]

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

A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand.

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!

CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own: That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or […]