Compass Rose

A nautical compass rose with N/E/S/W labels and a needle that points at the active direction. Hover any direction to rotate the needle smoothly via :has().

Pure CSS MIT licensed

Compass Rose the 17th 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

Open in playground

The code

<div class="ccm-compass">
  <input type="radio" name="ccm-compass" id="ccm-compass-n" hidden checked />
  <input type="radio" name="ccm-compass" id="ccm-compass-e" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-s" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-w" hidden />
  <div class="ccm-compass-face"></div>
  <div class="ccm-compass-needle" aria-hidden="true"></div>
  <label for="ccm-compass-n" class="ccm-compass-i" style="--a: 0deg">N</label>
  <label for="ccm-compass-e" class="ccm-compass-i" style="--a: 90deg">E</label>
  <label for="ccm-compass-s" class="ccm-compass-i" style="--a: 180deg">S</label>
  <label for="ccm-compass-w" class="ccm-compass-i" style="--a: 270deg">W</label>
</div>

.ccm-compass {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-compass-face {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2a3e, #15151d);
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    inset 0 0 24px rgba(212, 175, 55, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.ccm-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 70px;
  margin: -35px -2px;
  background: linear-gradient(180deg, #ff3d6e 0 50%, #d4af37 50% 100%);
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 2px;
}

.ccm-compass:has(#ccm-compass-n:checked) .ccm-compass-needle {
  transform: rotate(0deg);
}

.ccm-compass:has(#ccm-compass-e:checked) .ccm-compass-needle {
  transform: rotate(90deg);
}

.ccm-compass:has(#ccm-compass-s:checked) .ccm-compass-needle {
  transform: rotate(180deg);
}

.ccm-compass:has(#ccm-compass-w:checked) .ccm-compass-needle {
  transform: rotate(270deg);
}

.ccm-compass-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #ffd479;
  font:
    700 12px/28px ui-monospace,
    monospace;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-compass-i:hover {
  background: rgba(212, 175, 55, 0.4);
  color: #fff;
}

More from 21 CSS Circular & Radial Menu Designs

Solar System Hexagonal Honeycomb Rotating Triangle Trio Vinyl Record Iris Aperture Black Hole Chronometer Nebula Cloud Mission Hub Service Orbit Tactile Dial Fan Reveal

View the full collection →