Thread by @simonswiss

Loved these cool blurry, animated background shapes I noticed on the @qoals landing page the other day!

In this thread, I'll show you how to recreate them with @tailwindcss

First, we create three circles with full rounded corners (`rounded-full`).

We give them an `absolute` position with different top/right/bottom/left offsets, based on their `relative` parent container.

play.tailwindcss.com/yVdRQOY8rt

Next, we allow overlapping sections to blend together with the `multiply` mix blend mode.

We also use an `opacity-70` utility for each circle, to make our background slightly less intense.

play.tailwindcss.com/VsWPynEAZh

Time to make our circles blurry! For that, we will use the `blur` CSS filter. We want a strong blur, so we use `blur-xl` here.

To apply filters in @tailwindcss, you also need to use the `filter` class, which operates as a toggle to enable CSS filters.

play.tailwindcss.com/nsVVHJe1Io

Next, let's give some movement to our blobs. We'll create a custom keyframe animation to apply some translate & scale transforms.

The `blob` custom animation in our config file generates an `animate-blob` utility, which we can use on our three circles!

play.tailwindcss.com/xHYXYBpzMi?fil…

Finally, we delay the start of our animations. For this, we create custom `animation-delay` utilities in our CSS file.

Our blob animations can now be staggered, which looks much better 🎉

play.tailwindcss.com/zkrP70hQjh?fil…

Aaaand... we're done! 🎉

The final result in a Tailwind Play: play.tailwindcss.com/SZsv4rsySB

From there, let your creativity guide you:

💡 background gradients instead of flat colors
💡 tweak the blob keyframe animation values
💡 experiment with other mix-blend-modes

Happy coding!

Quick correction: the correct Twitter handle for the source of inspiration is @qoalsapp 😅

qoals.com