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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻

Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(