While looking for inspiration for a new project, I came across the Untitled UI logo and decided to write it in CSS.
<div class="logo" style="--width: 20rem"></div>
.logo {
width: var(--width);
height: calc(var(--width) / 2);
background-color: hsl(258, 51%, 50%);
border-radius: 100vmin 100vmin 0 0;
position: relative;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: -100%;
transform: rotate(180deg);
background-color: hsl(258, 51%, 50%);
border-radius: 100vmin 100vmin 0 0;
}
&::after {
content: "";
width: 150%;
height: 150%;
position: absolute;
bottom: -150%;
left: -25%;
border-radius: 100vmin 100vmin 0 0;
transform: rotate(180deg);
background-color: hsla(228, 26%, 96%, 0.1);
backdrop-filter: blur(calc(var(--width) / 10));
}
}
Top comments (0)