gradient.scss

$gradients: (
  "-purple-pink": linear-gradient(135deg, $purple-400 0%, $pink-500 100%),
  "-aquamarine-mauve":  linear-gradient(130deg, #3bf0e4 -6.8%, #bca1f7 70%),
  "-purple-coral":  linear-gradient(87.54deg, #9867f0 -6.8%, #ed4e50 84.14%),
  "-purple-coral-dark": linear-gradient(92deg, #bca1f7 15%, #e577b4 45%, #ff7170 85%),
  "-coral-yellow":  linear-gradient(267.91deg, #ffe57f 9.35%, #ff7170 96.48%),
  "-coral-yellow-dark": linear-gradient(-70deg, #ff7170 0%, #ffe57f 100%),
  "-dark-mint":  linear-gradient(90deg, #05aa82, #1c8df0),
  "-mint-blue":  linear-gradient(271.72deg, #a2facf 7.09%, #64acff 96.61%),
  "-mint-blue-dark": linear-gradient(-70deg, #a2facf 0%, #64acff 100%),
  "-turq-purple-dark": linear-gradient(-70deg, #3bf0e4 0%, #bca1f7 100%),
  "-blue-green": linear-gradient(-70deg, #2188ff 0%, #01a49e 100%),
  "-red-orange": linear-gradient(-70deg, #ed4e50 0%, #f06f00 100%),
  "-blue-purple": linear-gradient(-70deg, #2188ff 0%, #804eda 100%),
  "-pink-blue": linear-gradient(-70deg, #db469f 0%, #2188ff 100%),
  "-pink-blue-dark": linear-gradient(-70deg, #e577b4 0%, #64acff 100%)
) !default;

@mixin bg-gradient($parent, $gradient) {
  #{$parent} {
    background: $gradient;
  }
}

@mixin text-gradient($parent, $gradient) {
  #{$parent} {
    background-image: $gradient;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

$border-width: 2px;
@mixin border-gradient($parent, $gradient) {
  #{$parent} {
    position: relative;
    background-clip: padding-box;
    &:before {
      content: "";
      position: absolute;
      background: white;
      border-radius: inherit;
      z-index: 1;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    &:after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: $gradient;
      content: "";
      z-index: 0;
      border-radius: inherit;
      margin: -$border-width;
    }
    & > span {
      z-index: 2;
    }
  }
}

@each $gradient, $value in $gradients {
  @include bg-gradient(".bg-gradient-#{$gradient}", $value);
}

@each $gradient, $value in $gradients {
  @include text-gradient(".text-gradient-#{$gradient}", $value);
}

@each $gradient, $value in $gradients {
  @include border-gradient(".border-gradient-#{$gradient}", $value);
}