CSSの細かい設定をビジュアル的に操作しソースコードを出力してくれるジェネレーターを紹介したいと思います。
グラデーション
CSS Gradien
![](https://push.tokyo/wp-content/uploads/2021/07/7c316621e328f2e97e094a47ccb65d46-1024x653.jpg)
Photoshopのグラデーション設定のように指定ができるCSSでのグラデーションジェネレター。
UIがわかりやすくて最近はメインでこれを使っています。
![はる](https://push.tokyo/wp-content/uploads/2021/02/09DEF696-E2EC-48B5-99D0-9B444306AC02.jpeg)
はる
フォトショップの設定と同じで、直感的!
Ultimate CSS Gradient Generator
![](https://push.tokyo/wp-content/uploads/2021/07/1a8bab85d342c3bdfce026f647c19bf3-1024x642.jpg)
Photoshopでお馴染みの見た目でグラデーションを作成が可能。
多くのパレットが用意されおりグラデーションをサクッと作成。
画像
Placehold.jp
![](https://push.tokyo/wp-content/uploads/2021/07/f022872becd29993567857e9bb4b3970-1024x745.png)
サイズを指定するとダミー画像のURLが発行してくれるサイトです。
開発中のダミー画像として超便利です。
数字も書いてあってわかりやすい画像なのもポイント高い。
![はる](https://push.tokyo/wp-content/uploads/2021/02/C9B6EAB9-9F85-4CAF-B712-77AE33EA1565.jpeg)
はる
ダミー画像のimgタグのsrcの指定にこれ!
box-shadow ジェンレーター
bad-company – box-shadowジェネレーター
![](https://push.tokyo/wp-content/uploads/2021/07/0d3d0fbfcfdc78ce90533f60963288fd-1024x671.jpg)
box-shadowの設定を複数指定できるジェンレーター。
一緒に、ボーダーの設定と丸角の設定もプレビューで確認しCSSのコードを出力してくれます。
![はる](https://push.tokyo/wp-content/uploads/2021/02/09DEF696-E2EC-48B5-99D0-9B444306AC02.jpeg)
はる
他の、box-shadowジェネレーターは複数指定に対応していなかったりしますが、このジェネレーターは複数指定が可能です!
三角形ジェネレーター
CSS三角形作成ツール
![](https://push.tokyo/wp-content/uploads/2021/07/8a2423a332bf7fae6cfe72efc16d3782-1024x691.png)
ちょっと古臭い見た目だが、迷わず設定ができ止めても使いやすい三角形作成ジェネレーター。
日本語なのも地味に嬉しい。
transitionのeasingジェネレーター
Ceaser
![](https://push.tokyo/wp-content/uploads/2021/07/42dc472572a08984feee54f3c0d8cacd-1024x836.jpg)
細かいeasingの設定を視覚的に確認しながら使えるジェネレーター。
『Code snippets, short and long-hand:』の部分のソースコードを使用します。