All Languages >> CSS >> scss gradient mixin

“scss gradient mixin” Code Answer

You may not remember next time either, so install Grepper.

scss gradient mixin

css by Successful Spider on Mar 25 2020 Donate

@mixin gradient($start-color, $end-color, $orientation) {
  background: $start-color;
  @if $orientation == 'vertical' {
    background: -webkit-linear-gradient(top, $start-color, $end-color);
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: -webkit-linear-gradient(left, $start-color, $end-color);
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}

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

“scss gradient mixin” Code Answer

You may not remember next time either, so install Grepper.

CSS queries related to “scss gradient mixin”

Learn how Grepper helps you improve as a Developer!

All CSS Answers

Grepper

Documentation

Social

Legal

Contact