How to build Blurry, Animated Shapes with Tailwind CSS.
Tags: tailwindcss
Published: 2022-03-26 03:58:49

---
title: How to build Blurry, Animated Shapes with Tailwind CSS.
published: true
date: 2022-03-20 07:04:00 UTC
tags: TailwindCSS
canonical_url: https://nextjsdev.com/how-to-build-blurry-animated-shapes-with-tailwind-css/
---

 ![How to build Blurry, Animated Shapes with Tailwind CSS.](https://nextjsdev.com/content/images/2022/03/tailwindcss-4.PNG)

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.

<!--kg-card-begin: html-->
<iframe src="https://www.loom.com/embed/0fc97838dcfc4af6954b4e8d61e49341" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<!--kg-card-end: html-->

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

<!--kg-card-begin: markdown-->
```bash

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

```
<!--kg-card-end: markdown-->

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:**

<!--kg-card-begin: markdown-->
```jsx
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>
  )
}

```
<!--kg-card-end: markdown-->

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:**

![How to build Blurry, Animated Shapes with Tailwind CSS.](https://nextjsdev.com/content/images/2022/03/before-animated-blur.PNG)
_Blurry background Shapes_

<!--kg-card-begin: markdown-->
```jsx
<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>

```
<!--kg-card-end: markdown-->

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:**

<!--kg-card-begin: markdown-->
```jsx
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>
  )
}

```
<!--kg-card-end: markdown-->

**And the design will look like this:**

![How to build Blurry, Animated Shapes with Tailwind CSS.](https://nextjsdev.com/content/images/2022/03/Animated-blurry-shape.PNG)
_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:

<!--kg-card-begin: markdown-->
```js
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: [],
};

```
<!--kg-card-end: markdown-->

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.

<!--kg-card-begin: markdown-->
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

```
<!--kg-card-end: markdown-->

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

<!--kg-card-begin: markdown-->
```html
<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>

```
<!--kg-card-end: markdown-->

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](https://twitter.com/raivikas200) 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](https://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](https://github.com/raiv200/animated-blurry-background) 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:

1. [Next.js and Tailwind Installation Docs](https://tailwindcss.com/docs/guides/nextjs)
2. [Github link for project](https://github.com/raiv200/animated-blurry-background)

Connect with me:

1. [Twitter Link](https://twitter.com/raivikas200)
2. [LinkedIn link](https://www.linkedin.com/in/raivikas200/)
3. [Facebook Link](https://www.facebook.com/raiv200/)
4. [Github Link](https://github.com/raiv200)