Designing a Stunning Floating Blob in the Background: A Step-by-Step Guide
Tags: css, ui, webdev, tutorial
Published: 2023-09-20 12:43:49

Have you ever visited a website and been mesmerized by a beautifully designed background that seems to flow and morph like a floating blob? 

![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49ywtnukdae2f9u1kdol.gif)

If you're looking to add a touch of creativity and uniqueness to your web projects, you might want to consider incorporating a floating blob with gradient colors. In this tutorial, we'll guide you through the process of achieving this effect using HTML and CSS.

This is the result of what we'll be creating :


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajpzqs174rpmhwz4t4qh.gif)

## 1️⃣ Create Blob

Begin by crafting an empty div with the class "blob."

Now, let's shape our blob. While SVG is a common choice, we'll opt for something simpler in this tutorial: `border-radius`.

```css
border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
```

### **But what's the '/' in** `border-radius`?

![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnhhh75ubgsuuzqghbhn.gif)

Normally, we specify one value, like `border-top-right-radius: 10px;`. However, you can define both horizontal and vertical radii for any side. For instance, with `border-top-right-radius: 10px 20px;`, where 10px is the horizontal radii and 20px is the vertical one.

[Read more about it here](https://stackoverflow.com/a/29966500/6065749).

**Short and sweet -** when we use `border-radius: 60% 40% 30% 70%`, it starts from the top-left and moves clockwise. We use percentages because they make it easier to create blobs than pixels.

Now, breaking down:

```css
border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
```

This translates to:

```css
border-top-left-radius: 60% 100%;
border-top-right-radius: 40% 85%;
border-bottom-right-radius: 30% 92%;
border-bottom-left-radius: 70% 74%;
```

Check out [this tool](https://9elements.github.io/fancy-border-radius/) to create different shapes of blobs using border-radius.

## 2️⃣ Style the Blob

Give your blob some life by adding background color, width, and height:

Use this [tool](https://cssgradient.io/) to create beautiful CSS gradients.

```css
.blob {
    ...
    background: linear-gradient(47deg, rgba(255,88,139,1) 21%,  rgb(0 164 173) 67%, rgba(118,74,166,1) 81%);
    width: 400px;
    height: 400px;
}
```

**(Optional):** Spice things up with more colors and shapes using `box-shadow` with `inset`:

```css
.blob {
    ...
    box-shadow: inset 50px 50px 17px 0px #ff588b,
                inset 100px 100px 17px 0px #66319f;
}
```

Let's tone it down a notch. Apply some blur, reduce opacity, and push it to the background with a negative `z-index`:

```css
.blob {
    ...
    opacity: 0.5;
    filter: blur(40px);	
    z-index: -1;
}
```

## Animate the Blob 🕺🏿


![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b73jplfqlrezkiqdqlsy.gif)

Time to make it dance! Animate with `translate`, `scale`, and `rotate`. Don't forget to animate the `border-radius` too, so the blob keeps morphing. Use `position: absolute` for the blob and `position: relative` for the parent div.

```css
.blob {
    ...
    animation: animate 20s cubic-bezier(0.68, -0.55, 0.27, 1.55) 
               infinite alternate forwards;
}

@keyframes animate {
  0% {
    transform: translate(40%, -25%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    transform: translate(0%, 13%);
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    transform: translate(-45%, 39%);
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}
```

## 🌟 Finishing Up 🌟

For the finishing touch, you can add your content on top of the blob to create a captivating final product.

And voila! You've got yourself a dynamic, eye-catching blob. Enjoy the creative process!

{% codepen https://codepen.io/arindam404/pen/qBLVwPd %}

References: 
[Youtube video](https://www.youtube.com/watch?v=nO6o3fD_jiU)