<h1>Beautiful Gradient</h1>
/* mixinの定義 */
@mixin bg-gradient($angle: 180deg, $color: #0bd, $amount: 20%) {
  background: linear-gradient($angle, $color, adjust-hue($color, $amount)) fixed;
}

/* 必要箇所でmixinの呼び出し */
body {
    @include bg-gradient(90deg, #fbb, 100%);
}

h1 {
  font-family: 'Sansita', sans-serif;
  color: #fff;
  margin: 180px 0;
  text-align: center;
  font-size: 3rem;
  text-shadow: 2px 2px rgba(#000, .2);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.