Sample to draw soap bubbles with CSS

Basic HTML

<div class="soap_wrap">
	<div class="soap"></div>
</div>

Set "relative" to the parent ".soap_wrap"

and "absolute" to the child ".soap" to animate it.

Samples

Standard

No animation at all.

.soap_wrap {
	position: relative;
	height: 260px; /* As you like */
}
.soap {
	position: absolute;
	left: calc(50% - 100px); /* As you like */
	top: calc(50% - 100px); /* As you like */
	width: 200px; /* As you like */
	height: 200px; /* As you like */
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	z-index: 1; /* Workaround for a bug in Safari where overflow: hidden; doesn't work when border-radius and animation are used together */
}
.soap::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	filter: blur(15px);
}
.soap::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	filter: blur(15px);
}

PR

Glossy

Added rotation to the glossy parts for a shiny look.

.soap_wrap {
	position: relative;
	height: 260px; /* As you like */
}
.soap {
	position: absolute;
	left: calc(50% - 100px); /* As you like */
	top: calc(50% - 100px); /* As you like */
	width: 200px; /* As you like */
	height: 200px; /* As you like */
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	z-index: 1;
}
.soap::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

/* Glossy animation */
@keyframes soap_rotate{
	0%{transform: rotate(0);}
	50%{transform: rotate(160deg);}
}

Glossy, moving up and down

Added an animation to move it up and down further.

.soap_wrap {
	position: relative;
	height: 260px; /* As you like */
}
.soap {
	position: absolute;
	left: calc(50% - 100px); /* As you like */
	top: calc(50% - 100px); /* As you like */
	width: 200px; /* As you like */
	height: 200px; /* As you like */
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	animation: soap 10s 0s ease-in-out infinite;
	z-index: 1;
}
.soap::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

@keyframes soap_rotate{
	0%{transform: rotate(0);}
	50%{transform: rotate(160deg);}
}

/* Move up and down (as you like) */
@keyframes soap{
	0%{transform: translateY(0);}
	50%{transform: translateY(30px);}
}

Comments

If this was helpful, we appreciate your support!
Any support received will be used for childcare.

Alternatively, buy something from the buttons below to support us
(You don't have to buy the linked product.)

Amazon

楽天市場

Yahoo!ショッピング

PR