<div class="frutiger_orb">
<div></div>
</div>
<div class="frutiger_orb frutiger_shadow">
<div></div>
</div>
/* Frutiger Orb - www.kazimariusz.com */
html:root {
--frutiger-orb-color: rgb(246, 22, 119);
--frutiger-orb-background-image: url("https://static.kazimariusz.com/snippets/frutiger.jpg");
--frutiger-orb-size: 200px;
}
.frutiger_orb {
height: var(--frutiger-orb-size);
width: var(--frutiger-orb-size);
border-radius: 100%;
position: relative;
overflow: hidden;
box-shadow: 0px 0px calc(var(--frutiger-orb-size) / 20)
var(--frutiger-orb-color);
}
.frutiger_shadow {
box-shadow: 0px 0px calc(var(--frutiger-orb-size) / 20) var(--frutiger-orb-color),
0px calc(var(--frutiger-orb-size) / 4) calc(var(--frutiger-orb-size) / 9) calc(-1*var(--frutiger-orb-size) / 4) var(--frutiger-orb-color),
0px calc(var(--frutiger-orb-size) / 3) calc(var(--frutiger-orb-size) / 4) calc(-1*var(--frutiger-orb-size) / 10) rgba(0, 0, 0, 0.8);
}
.frutiger_orb::before,
.frutiger_orb::after {
content: "";
display: block;
border-radius: 100%;
position: absolute;
z-index: 1;
}
.frutiger_orb::before {
width: 68%;
height: 54%;
left: 16%;
top: 1%;
background-color: rgba(255, 255, 255, 0);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, white 100%);
}
.frutiger_orb::after {
width: 94%;
left: 3%;
bottom: -5%;
height: 94%;
opacity: 0.8;
background-image: radial-gradient(white 10%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 60%);
mix-blend-mode: overlay;
}
.frutiger_orb div {
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 calc(var(--frutiger-orb-size) / 5)
calc(var(--frutiger-orb-size) / 20) var(--frutiger-orb-color);
background: var(--frutiger-orb-background-image);
background-size: cover;
background-position: center;
}
.frutiger_orb div::after {
width: 100%;
height: 100%;
content: "";
display: block;
background-color: var(--frutiger-orb-color);
opacity: 0.6;
}