본문 바로가기
css/e.g.

[PC] Gradient Doughnut 1

by by-choice 2021. 9. 24.
반응형
.doughnut {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%; 
  padding: 20px; // doughnut width
  background:linear-gradient(45deg,#00dbde,#fc00ff); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; 
  mask-composite: exclude; 
}
<div class="doughnut"></div>
반응형

댓글