skip to content
Vibes Fonts & Sizes Alignment
More typography Type Scale
Colors, contrast, and blur

[As] a flame, Which oft, they say, some evil Spirit attends, Hovering and blazing with delusive light–

—John Milton
This post is part of a series…

Playful gradient inspiration

Last week, my friend Dylan (a junior dev looking for work, if you have any leads!) sent me a question about improving the performance of this fun blurry-blob background animation:

It performs ok on my machine, but can get choppy on less powerful devices

I made a few small suggestions, and sent links to other animation performance resources. But this isn’t a post about animation performance. I love the sense of playfulness that Dylan has already discovered in CSS – despite code bootcamps generally not giving the language much attention.

Now I want to play with blurry blob backgrounds too!

Looking for texture

Over at CSS { In Real Life }, Michelle Barker wrote a great post on CSS Halftone Patterns. I’ve always enjoyed halftone patterns, and I’ve been looking for something to add texture to my new site design. The last several designs used semi-random semi-transparent bubbles – something like this, but with colors based on the site design:

Hit 'rerun' in the bottom right to generate new circles

I like that randomness, but it’s time to try something new.

After playing with the half-tones effect, it didn’t feel quite right in context. So I went looking for more inspiration. There are a lot of CSS background pattern ideas out there:

As always, Ana Tudor also has a series of fantastic gradient demos on CodePen:

A conic & radial first draft

I might revisit some of those ideas down the road. I imagine this site potentially having different patterns for different areas of the site – or maybe a way to select your favorite pattern? But for now I went with a pattern by Temani Afif that I really love:

I swapped in my own subtle site background colors, and an extra radial gradient on top. I think the pattern would get overwhelming if it continued too far down the page, so this gives it a nice fade-out with soft/curved edges.

Blended gradient tie-dye

As part of playing around and exploring these patterns, I realized both conic gradients and background blend mode are both well-supported features.

That’s not surprising, they’ve been around for a while now, but I’ve never integrated them into my work before. So I spent some time exploring, and really enjoyed this result:

Almost tie-dye, if only we had spiral gradients

It’s fun to just sit and tinker with the colors, gradients, and blend modes to see what happens. I also experimented with using oklch to get a more uniform lightness – but found that didn’t have the same impact. I guess variation is part of the charm. If your browser supports oklch, you can uncomment that code to see the results.

I also experimented with animating the positions of each gradient, but that didn’t seem to play well with blend-modes? I’ll have to look into that more.

I might use this effect in my site footer – where I previously had a trans flag. What happens if we use the trans colors?