Create a Blob with just HTML & CSS

Html and css are the core building block of a website. They are used to build tons of amazing stuffs in a website. Things like :

Text
Images
Animations
Text and Background Colors etc.

are built with just html and css.

All frontend frame works are built on top of html & css .

Creating a blob with just html and css is pretty simple and brief because it doesn't involve any logic, just pure html and css is what is required here; let's dive into that.

First, Let's set up our code structure:

Create a folder in your document, call it any name like html-css-blob.
Open that in vscode or in any prefered code editor of your choice using this command right click on the folder and select open with vscode (in windows)
create two files there: index.html and style.css.

Once you are done setting up the project structure, paste the below code there:

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Background animation</title>
  </head>
  <body>
    <div class="change">
      <img src="./flower-3.jpg" alt="flower" width="300" height="300" />
    </div>
  </body>
</html>

CSS :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: azure;
}

.change {
  width: 30rem;
  height: 30rem;
  margin: 5rem auto;
  background: #000;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  animation: change 5s ease infinite alternate;
}

@keyframes change {
  0% {
    background-color: red;
    border-top-left-radius: 13rem;
    transition: all 1s ease;
  }
  25% {
    background-color: green;
    border-bottom-left-radius: 16rem;
    transition: all 1s ease;
  }
  50% {
    background-color: rgba(255, 67, 82, 0.4);
    transition: all 1s ease;
  }

  75% {
    background-color: purple;
    transition: all 1s ease;
    border-bottom-right-radius: 16rem;
  }

  100% {
    background-color: #f68b1c;
    transition: all 1s ease;
    border-top-right-radius: 13rem;
    /* transform: rotate(360deg); */
  }
}

After pasting the code in your code editor, open that in your brower to see the blob.

Thanks For Reading ❤❤❤💜💜💜

Create a Blob with just HTML & CSS

Table of contents

No headings in the article.