gradient border (from github)

by tnhu

HTML

<section>
  <p>Harness</p>
</section>

<p>
  Github original
  <img src="https://i.imgur.com/GobzPHR.png" />
</p>

SCSS

@mixin flex-center-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin make-gradient-border($width, $height, $borderWidth) {
  @include flex-center-container();
  position: relative;
  width: $width - $borderWidth;
  height: $height - $borderWidth;
  &:before {
    position: absolute;
    width: $width;
    height: $height;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: $borderWidth;
    content: '';
    z-index: -1;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  @include flex-center-container();
}

section {
  margin: 0 auto;
  background: #fefefe;
  @include make-gradient-border(300px, 100px, 4px);
}