Stu Nicholls | CSS PLAY | CSS superellipse flower

Date : 10th November 2025

For Edge, Chrome and Opera at the moment

<div id="flower">
	<div class="petal p01"></div>
	<div class="petal p02"></div>
	<div class="petal p03"></div>
	<div class="petal p04"></div>
	<div class="petal p05"></div>
	<div class="petal p06"></div>
	<div class="petal p07"></div>
	<div class="petal p08"></div>
	<div class="petal p09"></div>
	<div class="petal p10"></div>
	<div class="petal p11"></div>
	<div class="petal p12"></div>
	<div class="petal p13"></div>
	<div class="petal p14"></div>
	<div class="petal p15"></div>
	<div class="petal p16"></div>
 
	<div class="mid1"></div>
	<div class="mid2"></div>
</div>
  
  
#flower {width:45%; max-width:300px; aspect-ratio:1; margin:90px auto; position:relative; transform: perspective(300px) rotateX(30deg);}

#flower .petal {position:absolute; left:0; top:0; width:50%; aspect-ratio:1; background: linear-gradient(135deg, #800, #f00, #f00, #800);
 filter: drop-shadow(5px 5px 10px #444);
 border-radius: 5% 100% 5% 100%;	
 corner-shape: superellipse(1) superellipse(0.5) superellipse(0) superellipse(0.5); 
 transform-origin:100% 100%;
 border:1px solid #faa;
 animation:rot 8s linear infinite;
}

.p02 {animation-delay:-1s !important;}
.p03 {animation-delay:-2s !important;}
.p04 {animation-delay:-3s !important;}
.p05 {animation-delay:-4s !important;}
.p06 {animation-delay:-5s !important;}
.p07 {animation-delay:-6s !important;}
.p08 {animation-delay:-7s !important;}
.p09 {animation-delay:-0.5s !important;}
.p10 {animation-delay:-1.5s !important;}
.p11 {animation-delay:-2.5s !important;}
.p12 {animation-delay:-3.5s !important;}
.p13 {animation-delay:-4.5s !important;}
.p14 {animation-delay:-5.5s !important;}
.p15 {animation-delay:-6.5s !important;}
.p16 {animation-delay:-7.5s !important;}
 
#flower .mid1 {width:36%; aspect-ratio:1; position:absolute; left:32%; top:32%; border-radius:100%; animation:rot 8s linear infinite;
background-image: radial-gradient(#aa0 20%, #0000 5%), radial-gradient(#ee0 30%, #0000 10%), radial-gradient(#ff0, #880);
background-size: 10px 10px;
background-position: 0 0, 6.5px 6.5px;
filter: drop-shadow(0px 0px 6px #333);
}

#flower .mid2 {width:36%; aspect-ratio:1; position:absolute; left:32%; top:32%;border-radius:100%; animation:rot 8s linear infinite;
background-image: radial-gradient(circle farthest-side at center, #440 0%, #8808 30%, #0000 50%, #0000 80%, #440 100%);
}

@keyframes rot {
0% {rotate:0deg;}
100% {rotate:360deg;}
}

Information

Having more fun with the latest CSS style corner-shape:superellipse().

This is a flower with the petal shape formed using superellipse(), then tilted using perspective and finally animated through 360^o.

See Corner-shape for more information.
See Superellipse() for more information.

Please consider making a donation, every little helps.

CSS PLAY

Doing It With Style

DEMOS › CSS more fun with corner-shape:superellipse()

Date : 10th November 2025

For Edge, Chrome and Opera at the moment

Information