<div class="cir">o</div>
<p>
  This is my trick to have a round border gradient with a transparent middle.
  All other methods I have found have no transparent center. If there is a better solution please let me know!
  Anyway Hope this helps.
</p>

body {
  background-color:#080808;
	animation:changebg 30s infinite;
  overflow:hidden;
}

@keyframes changebg {
	0%{background-color:#23966c;}
	20%{background-color:#faaa54;}
	40%{background-color:#e23b4a;}
	60%{background-color:#db0768;}
	80%{background-color:#360670;}
  100%{background-color:#23966c;}
}

.cir {
color: white;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 700px;
    line-height: 54vw;
    font-style: normal;
    font-weight: 100;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 999;
    margin-top: -70px;
}

p {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  text-align:center;
  font-family: 'Josefin Sans', sans-serif;
  color:white;
  font-weight:400;
}