21 CSS Circular & Radial Menu Designs
Nebula Cloud
Items float in a soft glowing nebula cloud with no fixed grid positions. Each item has a subtle drift animation; hovering pulls it forward and brightens the surrounding glow.
Nebula Cloud the 21st 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-neb"> <div class="ccm-neb-cloud"></div> <a href="#" class="ccm-neb-i" style="--x: -50px; --y: -30px; --d: 0s">★</a> <a href="#" class="ccm-neb-i" style="--x: 30px; --y: -40px; --d: 1s">✦</a> <a href="#" class="ccm-neb-i" style="--x: 60px; --y: 10px; --d: 2s">✧</a> <a href="#" class="ccm-neb-i" style="--x: 0px; --y: 30px; --d: 1.5s">◆</a> <a href="#" class="ccm-neb-i" style="--x: -60px; --y: 20px; --d: 0.5s">⬢</a> </div>
.ccm-neb {
position: relative;
width: 220px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-neb-cloud {
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 30% 40%, rgba(124, 108, 255, 0.45), transparent 70%),
radial-gradient(50% 40% at 70% 60%, rgba(255, 108, 138, 0.4), transparent 70%),
radial-gradient(45% 35% at 50% 30%, rgba(46, 184, 138, 0.3), transparent 70%);
filter: blur(10px);
animation: ccm-neb-drift 10s ease-in-out infinite alternate;
}
.ccm-neb-i {
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin: -18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transform: translate(var(--x), var(--y));
animation: ccm-neb-float 4s ease-in-out var(--d) infinite alternate;
transition:
transform 0.3s,
background 0.2s,
box-shadow 0.3s;
z-index: 2;
}
.ccm-neb-i:hover {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
transform: translate(var(--x), var(--y)) scale(1.3);
animation-play-state: paused;
}
@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-neb-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8px, -6px) scale(1.05); } }
@keyframes ccm-neb-float { to { transform: translate(calc(var(--x) + 4px), calc(var(--y) - 4px)); } }