CSSを簡単に生成できる便利なジェネレーターまとめ
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/main-images.png)
CSSで作るボタンやグラディーション背景、ストライプなどの模様を設定する際に、コードを自動で生成してくれる便利なジェネレーターをまとめました。
グラデーション
CSS Gradient
![](https://tamatuf.net/wp/wp-content/uploads/2021/01/gradi01.png)
色の指定から角度の指定まで、直感的にグラデーションを作成することができます。作成したグラデーションはそのままコードをコピーして使用することができます。
GradPad
![](https://tamatuf.net/wp/wp-content/uploads/2021/01/grade02.png)
色の追加や削除、グラデーションの向きや角度などをすべてドラッグで操作で設定することができます。グラデーション作成後は、ヘッダーメニューの「Get CSS for this Gradient」をクリックするとコードが表示されます。
Grabient
![](https://tamatuf.net/wp/wp-content/uploads/2021/01/grade03.png)
様々なグラデーションのサンプルが用意されています。グラデーションの左上をクリックすると、CSSをコピーすることができます。グラデーションは、色の追加・削除、角度などをカスタマイズすることも可能です。
ストライプ
CSS STRIPE GENERATOR
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt01-1024x532.png)
ストライプの角度や線の間隔まで細かく設定できます。
作成したスクリプトはsassでも書き出せます。
HORIHAVALABO CSS Sample
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt02-1024x494.jpg)
2色と幅を設定するだけで作成できる使い易いジェネレーターです。
ストライプだけでなく、グラデーションやチェック、千鳥格子のような複雑な模様まで揃っています。
ボタン・アイコン
CSS Button Generator
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt04-1024x494.png)
文字の大きさ、余白、背景色、ドロップシャドウなど、ボタンに必要な要素を細かく設定できます。
Css Effects
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt03-1024x494.png)
ボタンやリンクに設定できるアニメーションが揃っています。サンプルのボタンをクリックすると、cssのコードがコピーされます。
CSS Shapes and Icons Generator
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt05-1024x494.png)
CSS Shapes and Icons Generator
CSSだけで作成された、アイコンや図形のジェネレーターです。サムネイルをクリックすると、アイコンの色やサイズを変更することができます。
ふきだし
CSSデザインジェネレーター
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt06-1024x532.png)
サンプルの吹き出しをもとに、色や余白などの細かい設定が可能です。ボタンのジェネレーターもあります。
CSS triangle generator
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt07-1024x494.png)
ふきだしの三角の部分を作るのに便利なジェネレーターです。斜め方向や、正三角形も簡単に作ることができます。
シャドウ
CSS3 Generator
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt08-1024x532.png)
テキストシャドウ、ドロップシャドウをはじめとしたCSS3で可能なエフェクトを作成できるジェネレーターです。
テーブル
Table Tag Generator
![](https://tamatuf.net/wp/wp-content/uploads/2021/03/jt09-1024x494.png)
作成した表のテーブルタグを生成してくれるジェネレーターです。複雑なHTMLも可視化して作れるのでとても便利です。