21 CSS Circular & Radial Menu Designs
Iris Aperture
A camera-lens iris with 6 blades. On hover the blades "stop down" via clip-path + rotation, revealing menu items around the exposed diaphragm.
Iris Aperture the 18th 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-iris"> <div class="ccm-iris-blade" style="--a: 0deg"></div> <div class="ccm-iris-blade" style="--a: 60deg"></div> <div class="ccm-iris-blade" style="--a: 120deg"></div> <div class="ccm-iris-blade" style="--a: 180deg"></div> <div class="ccm-iris-blade" style="--a: 240deg"></div> <div class="ccm-iris-blade" style="--a: 300deg"></div> <a href="#" class="ccm-iris-i" style="--a: -90deg">◐</a> <a href="#" class="ccm-iris-i" style="--a: -30deg">◑</a> <a href="#" class="ccm-iris-i" style="--a: 30deg">◒</a> <a href="#" class="ccm-iris-i" style="--a: 90deg">◓</a> <a href="#" class="ccm-iris-i" style="--a: 150deg">◉</a> <a href="#" class="ccm-iris-i" style="--a: 210deg">○</a> </div>
.ccm-iris {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at center, #0a0a14 30%, #15151d);
border: 4px solid #2a2a3e;
}
.ccm-iris-blade {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px;
background: linear-gradient(135deg, #2a2a3e, #15151d);
clip-path: polygon(50% 0%, 100% 50%, 50% 50%);
transform: rotate(var(--a)) translateY(-30px);
transform-origin: center;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.ccm-iris:hover .ccm-iris-blade {
transform: rotate(calc(var(--a) + 30deg)) translateY(-50px);
}
.ccm-iris-i {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
margin: -14px;
border-radius: 50%;
background: #1f1f2e;
color: #00e5ff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: 1px solid rgba(0, 229, 255, 0.4);
transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
opacity: 0;
transition: opacity 0.4s ease 0.25s;
z-index: 2;
}
.ccm-iris:hover .ccm-iris-i {
opacity: 1;
}
.ccm-iris-i:hover {
background: #00e5ff;
color: #0a0a14;
} More from 21 CSS Circular & Radial Menu Designs
Nebula CloudMission HubService OrbitTactile DialFan RevealPetal FanFull Circle WheelPie Slice SelectorDonut SectorsHalf-Donut Speed DialGlass DomeHolographic Dome
View the full collection →