21 CSS Circular & Radial Menu Designs
Holographic Dome
A translucent dome with an iridescent rim that rotates continuously via @property-animated conic gradient. The dome itself stays still; only the rim shimmers.
Holographic Dome the 11th 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-holo"> <div class="ccm-holo-rim"></div> <div class="ccm-holo-dome"></div> <a href="#" class="ccm-holo-i" style="--a: -150deg">⌂</a> <a href="#" class="ccm-holo-i" style="--a: -120deg">⌕</a> <a href="#" class="ccm-holo-i" style="--a: -90deg">★</a> <a href="#" class="ccm-holo-i" style="--a: -60deg">♥</a> <a href="#" class="ccm-holo-i" style="--a: -30deg">⚙</a> </div>
.ccm-holo {
position: relative;
width: 200px;
height: 110px;
}
.ccm-holo-rim {
position: absolute;
bottom: -2px;
left: -2px;
right: -2px;
height: 114px;
border-radius: 100px 100px 0 0;
background: conic-gradient(from var(--ccm-holo-a), #7c6cff, #ff6c8a, #2ecc8a, #00e5ff, #7c6cff);
animation: ccm-holo-spin 4s linear infinite;
filter: blur(0.5px);
}
.ccm-holo-dome {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 110px;
border-radius: 100px 100px 0 0;
background: rgba(15, 15, 25, 0.7);
backdrop-filter: blur(8px);
border-bottom: none;
}
.ccm-holo-i {
position: absolute;
bottom: 0;
left: 50%;
width: 32px;
height: 32px;
margin-left: -16px;
border-radius: 50%;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #c4b5fd;
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,
color 0.2s;
}
.ccm-holo-i:hover {
color: #fff;
transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
.ccm-holo-rim,
.ccm-snow-flakes,
.ccm-orbit-sat,
.ccm-orbit-i,
.ccm-solar-o,
.ccm-solar-o a,
.ccm-tri-grp,
.ccm-vinyl-disc,
.ccm-bh-disk,
.ccm-neb-cloud,
.ccm-neb-i {
animation: none !important;
}
}
@keyframes ccm-holo-spin { to { --ccm-holo-a: 360deg; } }
More from 21 CSS Circular & Radial Menu Designs
Single Satellite OrbitSolar SystemHexagonal HoneycombRotating Triangle TrioVinyl RecordCompass RoseIris ApertureBlack HoleChronometerNebula CloudMission HubService Orbit
View the full collection →