Blurry Color Blob

Create a blurry color blob using HTML and TailwindCSS.

Demo

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

1
<div class="w-full h-80 relative p-6">
2
  <!-- Color blob -->
3
  <div class="h-48 w-80 absolute blur-3xl top-8 left-8">
4
    <div
5
      class="h-full w-full opacity-60 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 [clip-path:polygon(61%_100%,92%_100%,100%_0,0_74%,20%_0)]"
6
    ></div>
7
  </div>
8

9
  <!-- Content -->
10
  <div class="w-full text-right flex flex-col items-end relative z-10">
10 collapsed lines
11
    <h1>Lorem Ipsum Dolor</h1>
12
    <p class="text-balance">
13
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
14
      tempor incididunt ut labore et dolore magna aliqua.
15
    </p>
16
    <button
17
      class="bg-blue-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-700 transition"
18
    >
19
      Learn More →
20
    </button>
21
  </div>
22
</div>

Prerequisites

TailwindCSS is required to use the code snippet above.

Steps

Inside the root div, create a nested div element for the color blob and a div element for the content:

<div class="w-full h-80 relative p-6">
  <!-- Color blob -->
  <div class="h-48 w-80 absolute top-0 left-0">
    <div class="h-full w-full" id="blob-shape"></div>
  </div>

  <!-- Content -->
  <div class="w-full text-right flex flex-col items-end relative z-10">
10 collapsed lines
    <h1>Lorem Ipsum Dolor</h1>
    <p class="text-balance">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <button
      class="bg-blue-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-700 transition"
    >
      Learn More →
    </button>
  </div>
</div>

Visit hypercolor.dev or any other tool to choose your favorite color gradient, for example, bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500. Then, update your blob shape with the gradient:
```
<div
  class="h-full w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"
  id="blob-shape"
></div>
```
Visit Clippy or any equivalent tool to generate a clip-path polygon. For example, polygon(61% 100%, 92% 100%, 100% 0, 0 74%, 20% 0). Update the blob shape with the clip-path:
```
<div
  class="h-full w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 [clip-path:polygon(61%_100%,92%_100%,100%_0,0_74%,20%_0)]"
  id="blob-shape"
></div>
```
Please note that the clip-path syntax is slightly different in TailwindCSS. Replace the spaces with underscores _ in the clip-path values.

Lower the opacity of the blob shape and add a blur effect to the blob wrapper to create a blurry color blob:

<div class="h-48 w-80 blur-3xl absolute top-0 left-0">
  <div
    class="h-full w-full opacity-60 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 [clip-path:polygon(61%_100%,92%_100%,100%_0,0_74%,20%_0)]"
  ></div>
</div>

You should now have a beautiful blurry color blob in your hero section.