How to build Blurry Animated Shapes with Tailwind CSS.

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

In this article, we are going to see, how we can build a Blurry Animated Shapes with Tailwind CSS. We’ll do it with a combination of CSS filters, mix-blend mode, and custom animations.

So let’s get started:

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

Step -1 : Create a new Next.js project


npx create-next-app@latest tailwind-shapes
Bash

After executing the above command, please select the choices according to the below-given instructions.


 Would you like to use TypeScript with this project? ... No / Yes
 Would you like to use ESLint with this project? ... No / Yes
 Would you like to use Tailwind CSS with this project? ... No / Yes
 Would you like to use `src/` directory with this project? ... No / Yes
 Would you like to use the experimental `app/` directory 
      with this project? ... No / Yes
 What import alias would you like configured? ... @/*
Bash

I have chosen yes for all of them, as I will be using Typescript and Tailwind CSS with Nextjs in this project.

Step -2 : Create Mockup Design to showcase , Blurry Animated Shapes with Tailwind CSS.

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

So, open the project in your favorite IDE, I am using VsCode Editor and open the page.tsx file which is inside the app folder and delete everything inside the page and paste the following code inside it.

Inside page.tsx write this code:


"use client";

import React from "react";

export default function HomePage() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <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>
  );
}

JavaScript

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, just right below the Comment.


{/* /////// Add the three divs below this comment ///////// */}

          
<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>
JavaScript

And the design will look like this:

Animated Blurry Shapes

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

The code will look like this now:

"use client";

import React from "react";

export default function HomePage() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <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="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>

          <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>
  );
}
JavaScript

Now the design will look like this:

Blurry Animated Shapes with Tailwind CSS.

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

For this open the tailwindcss.config.ts 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: [],
};
CSS

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 .


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

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

Now add the animate-blob class as well as these classes animation-delay-2000 , animation-delay-4000 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>

HTML

Hurray, Congratulations 🎉🎉 we built this project in less than 30 minutes.

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 then please do consider visiting my blog website nextjsdev.com, 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 the 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:

  1. Next.js and Tailwind Installation Docs
  2. Github link for the project

Connect with me:

  1. Twitter Link
  2. LinkedIn link
  3. Facebook Link
  4. GitHub Link

Vikas Rai

Vikas Rai

I'm Vikas Rai, a 23-year-old self-taught web developer with a passion for crafting web applications and side projects. My toolbox includes Next.js and Tailwind CSS, two technologies I hold dear for web development. I curate content on my personal blog, Nextjsdev.com, where I share insightful articles about Next.js, React.js, Tailwind CSS, and various projects I've built using these tools.

2 Comments

  1. I just could not depart your web site prior to suggesting that I really loved the usual info an individual supply in your visitors? Is gonna be back regularly to check up on new posts.

  2. Heya i’m for the first time here. I came
    across this board and I find It truly useful & it helped me out much.
    I hope to give something back and aid others like you
    helped me.

Leave a Reply

Your email address will not be published. Required fields are marked *