Untitled

dabblet.css

*, *::before, *::after {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  }

html, body {
  height: 100%;
  }
  
html {
  background: 
    linear-gradient(
      60deg,
      violet,
      purple,
      skyblue
      );
  }

div {
  background: #222;
  
  width: 76px;
  height: 76px;
  
  top: calc(50% - 38px);
  left: calc(50% - 38px);
  
  border-radius: 50%;
  
  animation: spin .6s linear infinite;
  }
  @keyframes spin {
    to {transform: rotate(1turn)}
    }
  
  div::before, div::after {
    content: '';
    position: absolute;
    z-index: -1;
    }
    
  div::after {
    width: 100px;
    height: 100px;
  
    background: 
      linear-gradient(
        hsla(0,0%,100%,0) 20%,
        white,
        hsla(0,0%,100%,0) 80%
        ),
      radial-gradient(
        hsla(210,50%,90%,.7) 30%,
        hsla(260,70%,30%,.8)
        );
  
    left: calc(50% - 50px);
    top: calc(50% - 50px);  
    
    border-radius: inherit;
    }    
  
 /*div::before {
    background: #222;
    width: 200px;
    height: 200px;
    border-radius: 1.2em;    
    top: -50px;
    left: -50px;
    }*/

dabblet.html

<div></div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}