Gradient Border, Rounded Corners, Transparent Body in one div

by ashtender

HTML

<div class="gradient-box">
  Look ma, no background!
</div>

CSS

.gradient-box::before {
  mask-image: linear-gradient(white), linear-gradient(white);
  mask-clip: no-clip, content-box;
  mask-composite: subtract;
  border-radius: 24px;
  border: 4px solid transparent;
  background: conic-gradient( 
    red, orange, yellow, green, blue, red);
  background-size: 100%;
  background-origin: border-box;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gradient-box {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
}

body {
  background-image:
    linear-gradient(45deg, #e2e2e2 25%, transparent 25%), 
    linear-gradient(135deg, #e2e2e2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e2e2 75%),
    linear-gradient(135deg, transparent 75%, #e2e2e2 75%);
  background-size:25px 25px; /* Must be a square */
  background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px;
}