CSSでのグラデーションの記法

最近はほとんどのブラウザでベンダープレフィックスが不要になったので、書くのが随分楽になりましたね。

グラデーションで使う個別の色の指定について[記事書きました](https://qiita.com/takeshisakuma/items/a4e841dbe924afd428cc)。

## 線形グラデーション

```:css
/* background: linear-gradient(最初の色,2番目の色); */
background:linear-gradient(#F89174, #FFC778);
```
「#F89174」のようなHEX以外に、色名（例：red）やRGBでも指定可能です。

### グラデーションの方向の指定
```:css
/* to bottom 上から下へ (to bottomは省略可能) */
background: linear-gradient(to bottom,#29A2C6,#FFCB18); 
   
/* to top 下から上へ */
background: linear-gradient(to top,#29A2C6,#FFCB18);
   
/* to right 左から右へ */
background: linear-gradient(to right,#29A2C6,#FFCB18);　
   
/* to left 右から左へ */
background: linear-gradient(to left,#29A2C6,#FFCB18);　
``` 


### 多色グラデーション

```:css
/* 3色のグラデーション */
background:linear-gradient(#29A2C6,#FFCB18,#73B66B); 
 
/* 4色のグラデーション */
background:linear-gradient(#29A2C6,#FFCB18,#73B66B,#FF6D31);
```



### 色が変わる位置の指定
色コードの次に、半角スペースで区切って指定します。

%以外の単位も使用可能です。
[CSSの単位について](https://qiita.com/takeshisakuma/items/eeb8ac0194d009ab2af1)記事書きました。

```:css
 /* background:linear-gradient(色1 位置指定,色2 位置指定); */
 background:linear-gradient(#29A2C6 20%,#FFCB18 80%);
```

#### 未指定省略時の位置
|グラデーション全体の色数|1色目|2色目|3色目|4色目|
|---|---|---|---|---|
|2|0%|100%|-|-|
|3|0%|50%|100%|-|
|4|0%|33.3...%|66.6...%|100%|


### 角度
#### 斜め(45度)

```:css
/* 左上から右下へ */
background: linear-gradient(to bottom right, #29A2C6, #FFCB18);
  
/* 右上から左下へ */
background: linear-gradient(to bottom left, #29A2C6, #FFCB18);
 
/* 左下から右上へ */
background: linear-gradient(to top right, #29A2C6, #FFCB18);
 
/* 右下から左上へ */
background: linear-gradient(to top left, #29A2C6, #FFCB18);
```

#### 斜め(角度を指定)
```:css
/* background: linear-gradient( 角度 , 色1 , 色2); */
background: linear-gradient(25deg, #29A2C6, #FFCB18); 
```
|deg|方向|
|---|---|
|0deg|下から上へ|
|45deg|左下から右上へ|
|90deg|左から右へ|
|180deg|上から下へ|

## 円形グラデーション

```:css
/* background: radial-gradient(中心の色, 外側の色); */
background: radial-gradient(#29A2C6, #FFCB18); 
```
※線形グラデーションと同様に、多色、変更位置の指定が可能です。




## 透明を使ったグラデーション
グラデーションには、透明(transparent)や半透明(rgba(255,109,49,0.5))なども指定可能です。

```:css
background: linear-gradient(#29A2C6, rgba(255,109,49,0.5));
```

### 背景画像を使ったグラデーション
色の指定の後にカンマ区切りでurl(画像のパス)を指定をします。
背景画像が見えるように、透明か、半透明を指定します。

```:css
 /* background: linear-gradient(半透明色1, 半透明色2) ,url(画像のパス); */
 background: linear-gradient(30deg, rgba(115,182,107,0.5), rgba(255,109,49,0.5)),url(img/image.jpg);
``` 

必要に応じて、background-sizeで調整をします。


## グラデーションのアニメーション
```:css
body{
  background: linear-gradient(45deg, #29A2C6, #FFCB18, #73B66B);
  background-size: 500% 500%;
  animation: gradientAnim 20s ease infinite;
}
 
@keyframes gradientAnim {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
```

## グラデーション関係のWebサービス
### ジェネレータ

[shade](http://jxnblk.com/shade/)
[Blend](http://colinkeany.com/blend/)
[CSS Gradient Animator](http://www.gradient-animator.com/)
[Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)
[CSS Matic Gradient Generator](http://www.cssmatic.com/gradient-generator)
[CSS Gradient](https://cssgradient.io/)
[GradPad](http://ourownthing.co.uk/gradpad.html)


### コレクション
[WebGradients](https://webgradients.com/)
[uiGradients](https://uigradients.com/)
[Gradient Magic](https://www.gradientmagic.com/)
[Grabient](https://www.grabient.com/)
[Gradients Cards](https://gradients.cssgears.com/)
[Gradient Hunt](https://gradienthunt.com/)