【CSS】グラデーション（linear-gradient）の使い方まとめ

linear-gradientで作るグラデーションの実装方法をまとめました。

```css
{
  background: linear-gradient(to bottom, #78b0a0, #efdab9);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poVwbmx" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/poVwbmx">
  gradient</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient

## グラデーションをかける向きを変える
`to ○○`と方向を指定することでグラデーションをかける向きを変えることができます。

```css
{
  background: linear-gradient(to top, #22c1c3, #fdbb2d);
  background: linear-gradient(to right, #22c1c3, #fdbb2d);
  background: linear-gradient(to bottom, #22c1c3, #fdbb2d);
  background: linear-gradient(to left, #22c1c3, #fdbb2d);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExLXgwP" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/ExLXgwP">
  gradient_ direction</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 斜めにグラデーションをかける
`to ○○ ○○`と方向を半角スペースで区切って二つ指定することで斜めにグラデーションをかけることができます。

```css
{
  background: linear-gradient(to bottom right, #108dc7, #ef8e38);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyeRpMO" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/dyeRpMO">
  gradient_ diagonal</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 角度を指定してグラデーションをかける
方向指定を`○○deg`とすることで、細かく角度を指定してグラデーションをかけることができます。

```css
{
  background: linear-gradient(110deg, #dd3e54, #6be585);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNvwjvQ" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/rNvwjvQ">
  gradient_angle</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## グラデーションの位置を変える
色指定の後に半角スペースで区切ってパーセンテージを記述することで、グラデーションが始まる位置を指定することができます。
下記では縦に50%の位置を超えてからグラデーションが始まるようにしています。

```css
{
  background: linear-gradient(to bottom, #fc5c7d 50%, #6a82fb);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYjzNgV" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/zYjzNgV">
  gradient_position</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 3色以上のグラデーション
`,(カンマ)`で区切って色の記述を追加することで3色以上のグラデーションが実装できます。

### 3色
```css
{
  background: linear-gradient(to bottom, #aa4b6b, #6b6b83, #3b8d99);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOxwBYJ" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/jOxwBYJ">
  gradient_3colors</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 4色
```css
{
  background: linear-gradient(to bottom, #99f2c8, #12c2e9, #c471ed, #f64f59);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYjZmLa" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/vYjZmLa">
  gradient_4colors</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 画像にグラデーションをかける
linear-gradient()の後に`,(カンマ)`で区切ってurl()を書くことで画像に対してグラデーションをかけることができます。

```css
{
  background: linear-gradient(to bottom right, #fc5c7db3, #6a82fbb3), url(https://cdn.pixabay.com/photo/2015/10/13/15/16/lemons-986304_1280.jpg);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abGELGO" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/abGELGO">
  gradient_image</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## こんなこともできます
### hoverでグラデーションをフワッと変えたい(transition)
#### transitionを書いただけでは動かない
hoverでアニメーションを付けて色を変えたい時はtransitionを使用することが多いと思います。
しかし、linear-gradientは下記のようなtransitionを使った実装はできません。
transitionはbackground-imageをサポートしていないからです。

```scss:この実装だとグラデーションは変わるがtransitionが動作しない
{
  background: linear-gradient(to bottom, #d53369, #cbad6d);
  transition: 0.3s;
  
  &:hover {
    background: linear-gradient(to bottom, #cbad6d, #d53369);
  }
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKRZWzW" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/KKRZWzW">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

:::note warn
**background-colorではなくbackgroun-imageであることに注意**
linear-gradientで使用するbackgroundプロパティを略さずに書くとbackgroun-imageとなります。
略されているのはcolorだと勘違いして実装を進めていると、今回のようなケースでハマってしまうかもしれません。

```css
{
  background-image: linear-gradient(to bottom, #78b0a0, #efdab9);
}
```
:::

#### 疑似要素とopacityを使用する
ではどうすればいいのかというと、疑似要素とopacityを使用して`background-image & transition`で本来動いて欲しかったのと同じアニメーションを実装します。

疑似要素にはhover時に表示したい色を設定しておき、opacityでhover時のみ表示されるようにします。
そして元の要素に重ねて、transitionはopacityに適用されるようにします。
そうすることで、hoverして疑似要素が表示されるときにグラデーションがフワッと切り替わっているように見えます。

```scss
{
  position: relative;
  z-index: 0; // hover時にテキストなどが隠れないよう前面に設定する
  background: linear-gradient(to bottom, #d53369, #cbad6d); // 通常時のグラデーション

  // hover時に表示させる疑似要素
  &::after {
    position: absolute;
    z-index: -1; // hover時にテキストなどが隠れないよう背面に設定する
    background: linear-gradient(to bottom, #cbad6d, #d53369); // hover時のグラデーション
    opacity: 0; // 通常時は非表示(透明)にしておく
    transition: opacity 0.5s;
  }

  &:hover {
    &::after {
      opacity: 1; // hoverで疑似要素を表示する
    }
  }
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExLoWgR" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/ExLoWgR">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### borderでも使いたい
borderプロパティではlinear-gradientはサポートされていないので使用することができません。

:::note warn
**この書き方はできない**

```css
{
  border: linear-gradient(to bottom, #d53369, #cbad6d);
}
```
:::

borderのグラデーションを実装するには、これまで通りbackgroundでグラデーションを表示させつつ、それをborderっぽく見せる工夫が必要になります。
一例ですがここではグラデーションをかけた背景に、表示させたいborderのサイズ分だけ小さくした疑似要素を前面に重ねて、グラデーションがかかったborderが表示されているように見せたいと思います。

```scss
@mixin border($width, $height, $border_size) {
  width: ($width - $border_size * 2) + px;
  height: ($height - $border_size * 2) + px;
}

{
  position: relative;
  z-index: 0; // テキストなどが隠れないよう前面に設定する
  width: 150px;
  height: 150px;
  background: linear-gradient(to bottom, #5fc3e4, #e55d87);

  &::after {
    // 150x150のボックスに対して4pxのborder幅を引いたwidth,heightを設定する
    @include border(150, 150, 4);

    position: absolute;
    z-index: -1; // 要素のテキストなどが隠れないように背面に設定する
    background-color: #fff;
  }
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNJdEvw" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/WNJdEvw">
  gradient_border</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 円形のグラデーションを実装したい
radial-gradient()を使用することで実装ができます。
こちらもlinear-gradient同様色々な調整ができますが、この記事での説明は割愛します。

```css
{
  background: radial-gradient(#a5cc82, #00467f);
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBYpPOB" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/qBYpPOB">
  gradient_radial</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/radial-gradient

### 模様を書くことも可能
ここまで紹介したテクニックを駆使するとグラデーションで模様を表現することも可能です。
私の腕前では実装できないので下記のサイトからのコピーですが、1つだけ紹介したいと思います。
サイトの名前通り、まさにマジックですね。

https://www.gradientmagic.com/

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="OJZzxWx" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/OJZzxWx">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>