Create animated liquid shape using HTML and CSS

Creative CSS Effects | April 25, 2022

Today in this blog you’ll learn how to create animated liquid shape using HTML and CSS

Video tutorial of create animated liquid shape using HTML and CSS

This tutorial video can help you to create animated liquid shape using HTML and CSS

create animated liquid shape using HTML and CSS [Source Codes]

This source code can help you to create animated liquid shape using HTML and CSS

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="shape"></div>
</div>


</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background:#01111e;
	color: #000;
}

.container {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
}

.shape {
	background: linear-gradient(45deg, #00ffb6  0%, #000fa3 100%);
	animation: morph 8s ease-in-out infinite;
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	height: 400px;
	width: 400px;
	box-shadow: 0 0 20px #000
}

@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
		background-size: 100% 100%;
	}

	50% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
		background-size: 300% 150%;
	}

	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
		background-size: 100% 100%;
	}
}