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

—John Milton

| post

CSS Tie-Dye Gradient Backgrounds

a conic splash of color

Trans Rights in all-caps on blurry radial/conic tie-dye-like splash of pinks, blues, and whites
CSS is Rad(ial)

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:

See the Pen Moving CSS blur background by @miriamsuzanne on CodePen.

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:

See the Pen Random circles by @miriamsuzanne on CodePen.

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:

See the Pen Single element card background patterns by @thebabydino on CodePen.

See the Pen Single element card background patterns by @thebabydino 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:

See the Pen Fancy pattern using radial-gradient by @t_afif on CodePen.

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.

See the Pen Site background by @miriamsuzanne on CodePen.

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:

See the Pen Conic splash by @miriamsuzanne on CodePen.

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?

See the Pen Conic splash by @miriamsuzanne on CodePen.

WebMentions