.gradient-ring{--size: 600px;--border: 80px;position:relative;border-radius:50%;width:var(--size);height:var(--size);z-index:0;opacity:.5;transform:translate(-20%)}.gradient-ring:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(#0aeb82,#257fc1);padding:var(--border);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}