<div style="height: 40vh;">
<div class="labi"></div>
</div>
<style>
.labi {
position: relative;
width: 200px;
height: 200px;
margin: auto;
border-radius: 50%;
background: linear-gradient(0deg, #ea9999 12%, #f4cccc 100%);
}
.labi::after {
position: absolute;
left: -120px;
bottom: -60px;
display: block;
content: '';
width: 380px;
height: 140px;
background: linear-gradient(0deg, rgba(255,255,255,0.3) 70%, rgba(234, 153, 153,.2) 100%);
backdrop-filter: blur(20px);
border-radius: 50%;
transform: rotate(15deg);
transform-origin: center center;
}
</style>
<div class="labi"></div>
</div>
<style>
.labi {
position: relative;
width: 200px;
height: 200px;
margin: auto;
border-radius: 50%;
background: linear-gradient(0deg, #ea9999 12%, #f4cccc 100%);
}
.labi::after {
position: absolute;
left: -120px;
bottom: -60px;
display: block;
content: '';
width: 380px;
height: 140px;
background: linear-gradient(0deg, rgba(255,255,255,0.3) 70%, rgba(234, 153, 153,.2) 100%);
backdrop-filter: blur(20px);
border-radius: 50%;
transform: rotate(15deg);
transform-origin: center center;
}
</style>
Ulasan