<div class="container">
  <div class="input">
    <input class="input__input" type="text" placeholder="CSS gradient borders...">
    <div class="input__bg"></div>
  </div>
</div>

$green: #50c56c;
$blue: #4ec4ce;

* {
  box-sizing: border-box;
}
body {
  background-color: #333;
}
@mixin gradient-border($color1, $color2, $border-width, $direction) {
  border: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(#{$direction}, $color1 0%, $color2 100%), linear-gradient(#{$direction}, $color1 0%, $color2 100%);
  @if $direction == 'to right' or $direction == 'to left' {
    @if $direction == 'to right' {
      border-left: $border-width solid $color1;
      border-right: $border-width solid $color2;
    } @else {
      border-left: $border-width solid $color2;
      border-right: $border-width solid $color1;
    }
    background-position: 0 0, 0 100%;
    background-size: 100% $border-width;
  }
  
  @if $direction == 'to top' or $direction == 'to bottom' {
    @if $direction == 'to top' {
      border-top: $border-width solid $color2;
      border-bottom: $border-width solid $color1;
    } @else {
      border-top: $border-width solid $color1;
      border-bottom: $border-width solid $color2;
    }
    background-position: 0 0, 100% 0;
    background-size: $border-width 100%;
  }
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.input {
  width: 450px;
}
.input__input {
  position: relative;
  font-size: 36px;
  width: 100%;
  padding: 0.5em 0.6em;
  line-height: 1.4;
  -webkit-appearance: none;
  border-radius: 2px;
  @include gradient-border($green, $blue, 3px, 'to right');
  background-color: transparent;
  color: white;
  
  &::-webkit-input-placeholder {
    color: #eee;
    font-family: 'Proxima Nova', 'futura', 'helvetica';
    transition: color 0.2s ease-out;
  }
  &:focus {
    outline: none;
    &::-webkit-input-placeholder {
      color: white;
    }
    ~ .input__bg {
      //width: 100%;
      opacity: 1;
    }
  }
}
.input__bg {
  display: block;
  position: absolute;
  z-index: -1;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, $green 0%, $blue 100%), linear-gradient(to right, $green 0%, $blue 100%);
  
  transition: all 0.3s ease-out;
}