![](https://beeyanblog.com/wp-content/uploads/2019/10/desk-3139127_1280-1024x659.jpg)
どうも、べ〜やんです。
今回は、背景素材を生成してくれるCool Backgroundsを紹介します。
![](http://image.moshimo.com/af-img/0924/000000023470.jpg)
目次
Cool Backgroundsとは
![](https://beeyanblog.com/wp-content/uploads/2019/11/aa3c147c76269d314f11dfb01822073d-1024x536.png)
Cool Backgroundsとは、簡単に背景素材を生成してくれるサービスです。
グラデーション素材などを自動で生成してくれるので複雑な設定がいりません。
使い方
テーマ選択
5種類のテーマから選択して素材のタイプを選択。
- Trianglify
- Particles
- CSS Gradient
- Gradient Topography
- Unsplash
Trianglify
三角形とグラデーションの組み合わせ
![](https://beeyanblog.com/wp-content/uploads/2019/11/7aa0d4601c05cc24bcce8756c00c0635-1024x821.png)
Particles
図形のアニメーション
![](https://beeyanblog.com/wp-content/uploads/2019/11/8a198cc303d9d20fccce93e77b8f6d3e-1024x699.png)
CSS Gradient
フレッシュカラーのグラデーション
![](https://beeyanblog.com/wp-content/uploads/2019/11/11dcc1c5f94bc6a18e801dcaab168977-1024x675.png)
Gradient Topography
滑らかな層状形状のグラデーション
![](https://beeyanblog.com/wp-content/uploads/2019/11/f01f0c3fa0aabe02f2420f3cdd188d4d-1024x696.png)
Unsplash
Unsplashから厳選された画像
![](https://beeyanblog.com/wp-content/uploads/2019/11/b1a38eaa08c01bfad60c04d7f5a1cf10-1024x691.png)
色の組み合わせ
画面右側のカラーパネルからグラデーションの色の組み合わせを選択することができます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/b53e1e5db8f5fbb0dd39742de97653a5-1024x527.png)
画面上部から色のタイプを設定できます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/79edc6c534e9df7a365ab968c28df685-1024x228.png)
BLACK
![](https://beeyanblog.com/wp-content/uploads/2019/11/bda08a75708c8b7b51c49e1c544eea18-1024x832.png)
WHITE
![](https://beeyanblog.com/wp-content/uploads/2019/11/174a336a6c1129f6701aba342ede80fb-1024x707.png)
BLUE
![](https://beeyanblog.com/wp-content/uploads/2019/11/40807e64e0487702988f8e5a4c5e1ac3-1024x803.png)
RED
![](https://beeyanblog.com/wp-content/uploads/2019/11/9d4753cce5235303fb5b20c1fb58e6e7-1024x787.png)
細かい設定
More optionsからさらに細かい設定ができるサービスに移動することができます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/b53e1e5db8f5fbb0dd39742de97653a5-1024x527.png)
おわりに
今回は、背景素材を生成してくれるCool Backgroundsを紹介しました。
簡単に素材を生成してくれるので作業時間が短縮できますね。
![](http://image.moshimo.com/af-img/0924/000000023470.jpg)