CutOut DIV with radial-gradient

HTML

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

CSS

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;
    box-shadow: -5px 9px 27px -5px rgba(0,0,0,0.75);
}
.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;
}