<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.