How to build Blurry, Animated Shapes with Tailwind CSS.

In this article, we are going to see, how we can build a blurry animated background shape just using Tailwind CSS. We'll do it with a combination of CSS filters, mix-blend-mode, and custom animations.

So let's get started.

But before that here is a little demo of what we are going to build.

First of all, we will create a Next.js project with Tailwind CSS.




npx create-next-app -e with-tailwindcss my-project-name

Now, we will create some mockup designs, so that we can this effect of the animated background shapes in the background.

Inside index.js write this code:



import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
           <h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
      <div className="bg-gray-50 w-full flex items-center justify-center px-16">
  <div className="relative w-full max-w-xl">

    /////// Add the three divs below this comment /////////


    <div className="m-8 relative space-y-4">
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-48 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-24 h-6 rounded-lg bg-purple-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-56 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-44 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-28 h-6 rounded-lg bg-pink-300"></div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
  )
}

Now, we will change the background color to bg-gray-50 and also we will hide this design for now by giving opacity-0 to the div so that we can focus on building the blurry animated shapes.

After this, create three divs of the same shape with different background colors and also assign the parent div with a relative class.

And the design will look like this:

Blurry background Shapes



<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
    <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
    <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>

Then to make these shapes blurry and to blend the three colors we will now add three classes mix-blend-multiply , filter , blur-xl to each of the three divs and also add opacity-70 class as well to make it look clean.

The code will look like this now:



import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
           <h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
      <div className="bg-gray-50 w-full flex items-center justify-center px-16">
  <div className="relative w-full max-w-xl">
    <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full opacity-70 "></div>
    <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full opacity-70 "></div>
    <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full opacity-70 "></div>
    <div className="m-8 relative space-y-4 opacity-0">
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-48 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-24 h-6 rounded-lg bg-purple-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-56 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-44 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-28 h-6 rounded-lg bg-pink-300"></div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
  )
}

And the design will look like this:

animated blurry background

So, the last thing is to add the animation to the burry shapes.

For this open the tailwindcss.config.js and add the blob animation like this:



module.exports = {
  theme: {
    extend: {
      animation: {
        blob: "blob 7s infinite",
      },
      keyframes: {
        blob: {
          "0%": {
            transform: "translate(0px, 0px) scale(1)",
          },
          "33%": {
            transform: "translate(30px, -50px) scale(1.1)",
          },
          "66%": {
            transform: "translate(-20px, 20px) scale(0.9)",
          },
          "100%": {
            transform: "tranlate(0px, 0px) scale(1)",
          },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now, the project is almost finished, but there is one problem.

The problem is all the blurry backgrounds are moving together, but we don't want that.

So to overcome this problem we will delay the animation of the other two divs.

For this open the global.css file inside the styles folder and add these classes.



@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
}

Now add the animate-blob class as well as these classes to the 2nd and 3rd div like this:



<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob ">
</div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
</div>

And tada 🎉🎉 we build this project in less than an hour.

Conclusion

Hope you were able to build this blurry animated background shape for your next project. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Connect with me:

Blog

How to build Blurry, Animated Shapes with Tailwind CSS.

raivikas

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related