All Languages >> CSS >> scss gradient mixin

“scss gradient mixin” Code Answer

scss gradient mixin

css by Daniel Stenson on Mar 25 2020 Donate

/* Mixin to create vertical, horizontal or radial gradient */
@mixin gradient($start-color, $end-color, $orientation) {
  background: $start-color;
  @if $orientation == 'vertical' { 
    /* Vertical gradient */
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {  
    /* Horizontal gradient */
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {  
    /* Radial gradient */
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}

/* Usage */
.gradient {
  @include gradient(#07c, #06f, vertical);
}