CutOut DIV with radial-gradient

by AndreaLigios

HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

CSS

@keyframes bg
{
    0%   {background: yellow; }
    25%  {background: orange; }
    50%  {background: darkorange;   }
    75%  {background: orange; }
    100% {background: yellow; }
}


body {
    background: yellow;
    animation: bg 3s infinite;
}
.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%, silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;
    
    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;    
    text-align: center;    
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}