/* This demo needs some HTML (18 div inside 1 section) */
section {
aspect-ratio: 1;
left: 50%;
position: absolute;
top: 50%;
translate: -50% -50%;
width: 50vmin;
div {
--a: 0deg;
background: radial-gradient(circle at 50% 100%, #ff0 5%, #000 85%);
border-radius: 100% / 50% 50% 150% 150%;
height: 30%;
left: 50%;
mask: linear-gradient(#000 90%, #0000);
position: absolute;
top: 50%;
transform:
translate(-50%, -50%)
rotate(var(--a))
translateY(-110%)
scale(0.8, 1.25);
width: 12%;
&:nth-child(1) { --a: 0deg; }
&:nth-child(2) { --a: 20deg; }
&:nth-child(3) { --a: 40deg; }
&:nth-child(4) { --a: 60deg; }
&:nth-child(5) { --a: 80deg; }
&:nth-child(6) { --a: 100deg; }
&:nth-child(7) { --a: 120deg; }
&:nth-child(8) { --a: 140deg; }
&:nth-child(9) { --a: 160deg; }
&:nth-child(10) { --a: 180deg; }
&:nth-child(11) { --a: 200deg; }
&:nth-child(12) { --a: 220deg; }
&:nth-child(13) { --a: 240deg; }
&:nth-child(14) { --a: 260deg; }
&:nth-child(15) { --a: 280deg; }
&:nth-child(16) { --a: 300deg; }
&:nth-child(17) { --a: 320deg; }
&:nth-child(18) { --a: 340deg; }
}
}
About This Illusion
The circle at the center of this flower-shaped element is the same white as the rest of the page, but it gives the impression of being brighter, as if it were emitting light.
To code this illusion in CSS, I had to add some HTML elements (mainly because CSS does not allow for background rotations). This one was a fun one to code.
Try This
- Focus on the center of the flower.