Как можно сверстать текст на котором фрагмент другого цвета?

.test {
  font-size: 300px;
  font-family: 'Helvetica';
  font-weight: bold;
  
  background-color: #bbb;
  
  background-image: radial-gradient(#036 50%, #bbb 50% 100%);
  background-repeat: no-repeat;
  background-size: 280px 280px;
  background-position: 30px 60px;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  color: white; /* на случай, если браузер не поддерживает clip: text */
}

<span class="test">2</span>