21 CSS Circular & Radial Menu Designs
Fan Reveal
Six wedges of a 6-color pie that fan open from a closed stack on first paint with a staggered "deal the cards" reveal — each wedge rotates from 0° to its 60° slot with a per-wedge delay. Hover lifts the wedge outward, click locks the selection. Pure CSS keyframe animation, zero JS — adapted from a jQuery-driven menu and rebuilt with proper 60° clip-path geometry.
Fan Reveal the 4th 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-fan" role="toolbar" aria-label="Fan Reveal">
<input type="radio" name="ccm-fan" id="ccm-fan-0" class="ccm-fan-r" hidden />
<input type="radio" name="ccm-fan" id="ccm-fan-1" class="ccm-fan-r" hidden />
<input type="radio" name="ccm-fan" id="ccm-fan-2" class="ccm-fan-r" hidden />
<input type="radio" name="ccm-fan" id="ccm-fan-3" class="ccm-fan-r" hidden />
<input type="radio" name="ccm-fan" id="ccm-fan-4" class="ccm-fan-r" hidden />
<input type="radio" name="ccm-fan" id="ccm-fan-5" class="ccm-fan-r" hidden />
<label for="ccm-fan-0" class="ccm-fan-w" style="--i: 0; --c: #255d74" aria-label="Home"
><span>home</span></label
>
<label for="ccm-fan-1" class="ccm-fan-w" style="--i: 1; --c: #da353b" aria-label="About"
><span>about</span></label
>
<label for="ccm-fan-2" class="ccm-fan-w" style="--i: 2; --c: #f89f44" aria-label="Contact"
><span>contact</span></label
>
<label for="ccm-fan-3" class="ccm-fan-w" style="--i: 3; --c: #78302c" aria-label="Links"
><span>links</span></label
>
<label for="ccm-fan-4" class="ccm-fan-w" style="--i: 4; --c: #002b55" aria-label="Bio"
><span>bio</span></label
>
<label for="ccm-fan-5" class="ccm-fan-w" style="--i: 5; --c: #207c6b" aria-label="Store"
><span>store</span></label
>
<span class="ccm-fan-hub" aria-hidden="true"></span>
</div> .ccm-fan {
position: relative;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Lato", system-ui, sans-serif;
filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}
.ccm-fan-w {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.35), transparent 55%),
radial-gradient(circle at 50% 30%, var(--c) 0%, color-mix(in srgb, var(--c), #000 35%) 100%);
cursor: pointer;
clip-path: polygon(50% 50%, 25% 6.7%, 37.06% 1.92%, 50% 0%, 62.94% 1.92%, 75% 6.7%);
transform-origin: 50% 50%;
transform: rotate(0deg);
animation: ccm-fan-deal 0.9s cubic-bezier(0.49, 0.24, 0.32, 0.96) forwards;
animation-delay: calc(var(--i) * 0.08s);
transition:
filter 0.3s,
transform 0.3s;
}
.ccm-fan-w span {
position: absolute;
top: 24px;
left: 50%;
display: inline-block;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
transform: translateX(-50%);
pointer-events: none;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.6),
0 0 8px rgba(255, 255, 255, 0.25);
white-space: nowrap;
}
.ccm-fan-w:hover,
.ccm-fan-w:focus-visible {
filter: brightness(1.18) saturate(1.2)
drop-shadow(0 0 12px color-mix(in srgb, var(--c), white 20%));
z-index: 2;
}
.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"],
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"],
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"],
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"],
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"],
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] {
filter: brightness(1.45) saturate(1.5)
drop-shadow(0 0 22px color-mix(in srgb, var(--c), white 40%))
drop-shadow(0 0 6px color-mix(in srgb, var(--c), white 60%));
z-index: 3;
transform: rotate(calc(var(--i) * 60deg)) scale(1.06);
}
.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"] span,
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"] span,
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"] span,
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"] span,
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"] span,
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] span {
font-size: 13px;
letter-spacing: 0.1em;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.7),
0 0 12px rgba(255, 255, 255, 0.6);
}
.ccm-fan-hub {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
radial-gradient(circle at center, #1f1f2e 0%, #0a0a14 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -2px 6px rgba(0, 0, 0, 0.5),
0 0 24px rgba(124, 108, 255, 0.25),
0 4px 12px rgba(0, 0, 0, 0.5);
z-index: 4;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.ccm-fan-w {
animation: none;
transform: rotate(calc(var(--i) * 60deg));
}
}
@keyframes ccm-fan-deal {
from { transform: rotate(0deg); }
to { transform: rotate(calc(var(--i) * 60deg)); }
}