スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20

スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20

用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。
CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。

ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。
また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。
各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。

Neumorphism/Soft UI CSS shadow generator

Neumorphism/Soft UI CSS shadow generator

新たなデザイントレンドのひとつとして少し前にも注目された、ニューモーフィズムな見栄えのスタイルを出力するジェネレータです。

Make a smooth shadow, friend.

Make a smooth shadow, friend.

近年よく見かける滑らかで自然な影を表現したいときに便利なbox-shadowのジェネレータです。

The Hero Generator

The Hero Generator

よく見かける幅いっぱいのイメージの上にタイトルとボタンが配置されているヒーローコンテンツを実装できるジェネレータです。
イメージに重ねるマスクの有無やスタイル、ボタンの有無やスタイルなど調整でき、実装に必要なHTMLとCSSが出力されます。

Fancy Border Radius Generator

Fancy Border Radius Generator

border-radiusを用いてユニークな形状の円を作成したいときに便利なジェネレータです。

Mycolorpanda - Make It Easy

Mycolorpanda - Make It Easy

2色構成グラデーションのジェネレータで、方向は全方向に加えradial-gradientも指定できます。

CSS Gradient

CSS Gradient

同じくグラデーションジェネレータですが、こちらの場合はカラーも2色以上指定できて角度や透過率も任意設定できます。
また、イメージをアップするとそこからカラー抽出してくれる機能も用意されています。

Animated CSS Background Generator

Animated CSS Background Generator

サークルやスクエアといったエレメントがアニメーションしている背景のジェネレータで、実装に必要なコードはHTMLとCSSが出力されます。
全3パターン用意されており、パターンによって項目は違いますがエレメントのサイズ・カラー・表示数なども指定できます。

CSS Section Separator Generator

CSS Section Separator Generator

6タイプのセパレータジェネレータで、タイプによって異なりますが角度や方向などを調整できます。
実装に必要なコードはHTMLとCSSが出力されます。

Grab n'go visual CSS editor

Grab n'go visual CSS editor

こちらは何か特定の見栄えを作るものではなく、CSSの様々なプロパティをいじってそれぞれどのような変化があるか確認できるツールで、コードはCSS, SASS, SCSS, LESSが出力されます。
特にCSSの勉強を始めたばかりで、このプロパティをいじることでどのような見栄えになるかをまだ把握しきれてない人には便利だと思います。

CSS Button Generator

CSS Button Generator

ベースとして利用できるデザインが40種類用意されており、そこからさらに任意で各値を調整することができるボタンジェネレータです。
実装に必要なコードはHTMLとCSSが出力されます。

CSS Grid Generator

CSS Grid Generator

CSS Gridのジェネレータで、ドラッグと数値入力で調整した見栄えをCSSで出力してくれます。

CSS Grid Generator

CSS Grid Generator

同じくCSS Gridのジェネレータで、こちらもドラッグと数値入力で調整した見栄えをCSSで出力してくれます。
CSSはプレフィックス付与やレガシーブラウザ対応を含めたコードでも出力させることができます。

Flexbox Playground

Flexbox Playground

Flexboxの勉強したいときに便利なジェネレータで、各プロパティを利用することで要素の並びや位置がどう変化するかを確認できます。
実装に必要なコードはHTMLとCSSが出力されます。

CSS Pie Chart

CSS Pie Chart

HTMLとCSSを使って表現した円グラフのジェネレータです。
名称やカラーの編集、項目の追加・削除、見栄えをドーナツ型に変更などができます。

CSS Arrow Please

CSS Arrow Please

吹き出しジェネレータで、位置・サイズ・カラーなどを調整できます。

CSS triangle generator

CSS triangle generator

三角形ジェネレータで、カラーや方向を調整できます。
方向は上下左右だけでなく右上や左下なども指定でき、三角形の種類も正三角形・二等辺・不等辺の中から指定できます。

Clippy

Clippy

複雑な形でクリッピングしたいときに便利なジェネレータで、ドラッグで調整した形を再現するのに必要なclip-pathを出力してくれます。
ベースとして利用できる形も20種類以上用意されており、表示確認時のイメージなども差し替え可能です。

CSS Transform Functions Visualizer

CSS Transform Functions Visualizer

Rotate, Skew, Scaleなどtransform関連のプロパティをまとめて調整できるジェネレータです。
CSSを勉強し始めてそれぞれの動きがまだ把握できてない人の学習ツールとしても便利です。

cubic-bezier.com

cubic-bezier.com

独自のイージング作成時に便利なcubic-bezier()のジェネレータで、lineareaseの動きとの違いを確認しながら調整できます。

Animista

Animista

様々なCSSアニメーションが用意されており、それをさらに任意調整したものをコード出力してくれるジェネレータです。

Close the search window,
please press close button or esc key.