21 CSS Circular & Radial Menu Designs
Glass Dome
A glass hemisphere with backdrop-blur and an inner highlight; menu items orbit along the dome edge. Items lift on hover. The hero of the dome family.
Glass Dome the 10th of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ccm-glass-bg">
<div class="ccm-glass">
<div class="ccm-glass-dome"></div>
<a href="#" class="ccm-glass-i" style="--a: -150deg">⌂</a>
<a href="#" class="ccm-glass-i" style="--a: -120deg">⌕</a>
<a href="#" class="ccm-glass-i" style="--a: -90deg">★</a>
<a href="#" class="ccm-glass-i" style="--a: -60deg">♥</a>
<a href="#" class="ccm-glass-i" style="--a: -30deg">⚙</a>
</div>
</div> .ccm-glass-bg {
padding: 30px;
border-radius: 14px;
background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
}
.ccm-glass {
position: relative;
width: 200px;
height: 110px;
}
.ccm-glass-dome {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 110px;
border-radius: 100px 100px 0 0;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.45);
border-bottom: none;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -10px 30px rgba(255, 255, 255, 0.1);
}
.ccm-glass-dome::before {
content: "";
position: absolute;
top: 8px;
left: 20%;
right: 50%;
height: 24px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
filter: blur(2px);
}
.ccm-glass-i {
position: absolute;
bottom: 0;
left: 50%;
width: 32px;
height: 32px;
margin-left: -16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1));
transition:
transform 0.3s,
background 0.2s;
backdrop-filter: blur(6px);
}
.ccm-glass-i:hover {
background: rgba(255, 255, 255, 0.45);
transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.18)
translateY(-6px);
}