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!
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.