CSSを簡単に生成できる便利なジェネレーターまとめ

CSSで作るボタンやグラディーション背景、ストライプなどの模様を設定する際に、コードを自動で生成してくれる便利なジェネレーターをまとめました。

グラデーション

色の指定から角度の指定まで、直感的にグラデーションを作成することができます。作成したグラデーションはそのままコードをコピーして使用することができます。

色の追加や削除、グラデーションの向きや角度などをすべてドラッグで操作で設定することができます。グラデーション作成後は、ヘッダーメニューの「Get CSS for this Gradient」をクリックするとコードが表示されます。

様々なグラデーションのサンプルが用意されています。グラデーションの左上をクリックすると、CSSをコピーすることができます。グラデーションは、色の追加・削除、角度などをカスタマイズすることも可能です。

ストライプの角度や線の間隔まで細かく設定できます。
作成したスクリプトはsassでも書き出せます。

２色と幅を設定するだけで作成できる使い易いジェネレーターです。
ストライプだけでなく、グラデーションやチェック、千鳥格子のような複雑な模様まで揃っています。

文字の大きさ、余白、背景色、ドロップシャドウなど、ボタンに必要な要素を細かく設定できます。

ボタンやリンクに設定できるアニメーションが揃っています。サンプルのボタンをクリックすると、cssのコードがコピーされます。

CSSだけで作成された、アイコンや図形のジェネレーターです。サムネイルをクリックすると、アイコンの色やサイズを変更することができます。

サンプルの吹き出しをもとに、色や余白などの細かい設定が可能です。ボタンのジェネレーターもあります。

ふきだしの三角の部分を作るのに便利なジェネレーターです。斜め方向や、正三角形も簡単に作ることができます。

テキストシャドウ、ドロップシャドウをはじめとしたCSS3で可能なエフェクトを作成できるジェネレーターです。

作成した表のテーブルタグを生成してくれるジェネレーターです。複雑なHTMLも可視化して作れるのでとても便利です。