CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。

CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだけでなく、プレビューを見ながらツールを使って微調整する方が効率がいい場合があります。

また、知らないと実装できないようなテクニックが使われていたり、作業量を大きく削減できるようなジェネレーター・ツールもたくさんあるので、ぜひチェックしてみてください。なお、一部SVGなどCSS以外のジェネレーターも掲載しています。

多機能ジェネレーター

The Ultimate CSS Generator | Web Code Tools

アニメーションやFilter、レイアウト、テキストなど様々なCSSを生成できるジェネレーターです。初心者の方がCSSのプロパティや値を覚える際にも使ってみると良さそうです。

CSS Generator

レイアウトや背景、transform、filterなど様々なCSSをジェネレートできるツール。プレビューを確認しながら細かく数値を調整することができるので、CSSに慣れていない方でもイメージ通りのコードを出力することができます。

Flexbox

FLEX LAYOUT GENERATOR

実際に表示例を見ながらFlexboxのCSSコードを生成できるジェネレーター。ベンダープレフィックスの出力もオプションで選択することができます。

TEST CSS FLEXBOX RULES

Flexboxで利用するCSSプロパティの値を切り替えてプレビューを見ながらコードをカスタマイズできるジェネレーター。シンプルですが直感的に理解しやすく、初心者の方におすすめです。

CSS Grid

Interactive CSS Grid Generator

CSS Gridをブラウザ上で作成し、CSSコードを出力することができるジェネレーター。CSS Gridの勉強にも使えます。

CSS Grid Generator

こちらはよりシンプルなCSS Gridのジェネレーター。行数と列数と、行列それぞれのGapを指定してコードを出力することができます。

レイアウト

CSS Layout Patterns

よく見かけるWebデザインのレイアウトやパーツのHTML/CSSコードが紹介されているサンプル集。コピペで色々なパーツを実装することができます。

CSS Layout Generator

テンプレートから選択してレイアウト用のCSSをカスタマイズしてエクスポートできるツール。現在はCSS Gridのみですが、今後Flexboxも追加される予定とのことです。

ローディングアニメーション

Epic Spinners

ユニークなローディングアニメーションが集まったサンプル集。使用したいアニメーションをクリックすると、HTMLとCSSのコードをコピーすることができます。

Loaders.css

色々なローディングアニメーションを簡単に表示できるスタイルシート。CSSの読み込みタグをHTMLに追加して、適切なクラス名を付与することでローディングアニメーションを表示することができます。

グラスモーフィズム

Toolbox – Glassmorphism Generator

グラスモーフィズムのCSSが出力できるジェネレーター。ライトテーマとダークテーマの2種類が用意されていて、ブラーや透明度などをカスタマイズすることができます。

Glassmorphism CSS Generator

こちらもグラスモーフィズムのカードが作れるCSSジェネレーター。背景画像を変更することができるます。

Glassmorphism CSS Generator by Hype4 Academy

こちらもグラスモーフィズムのCSSが出力できるジェネレーター。ブラーと透明度、背景色などが変更可能です。

ニューモーフィズム

Neumorphism.io

ニューモーフィズムのCSSが生成できるジェネレーター。 シャドーの位置を細かく変更できるほか、凹み具合なども選択することができます。

Neumorphic Generator

ニューモーフィズムが作れるCSSジェネレーター。「Next」というボタンを押すと、細かなプロパティの調節とCSSコードの出力ができます。

グラデーション

Fuze

美しいアニメーション付きのグラデーションが生成できるジェネレーター。CSSだけで作られていて、背景や様々な要素に使えそうです。

CSS Gradient

思い通りのグラデーションを作成し、CSSコードを出力することができるジェネレーター。プレビューを見ながら細かな値を調節することができるので、イメージ通りのグラデーションを作成しやすいですね。

box-shadow

Smooth Shadow

複数のシャドーを重ねてより魅力的なbox-shadowを作ることができるジェネレーター。細かな調整が可能で、美しいドロップシャドウにこだわりたい方におすすめです。


Beautiful CSS box-shadow examples

美しいbox-shadowのサンプルが掲載されているサンプル集です。クリックするとCSSコードをコピーすることができます。


box-shadowジェネレーター | bad-company

box-shadowのCSSコードが生成できるジェネレーター。ボタン型とカード型から選択することが可能で、マウス操作でシャドーをカスタマイズすることができます。

アニメーション

cubic-bezier.com

アニメーションのイージングを細かく指定可能なcubic-bezier()を視覚的に調整してコードを出力できるジェネレーターです。

Easings

こちらもcubic-bezier()をエクスポートできるツール。こちらのサイトはより豊富なテンプレートが用意されていて、イメージスライダーで動作を確認しながら調整することが可能です。

SVG Artista

手書き風のSVGアニメーションが作れるジェネレーター。SVGファイルをアップロードしてアニメーションを作成すると、SVGとCSSのそれぞれのコードをエクスポートすることができます。

ボタン

Beautiful CSS buttons examples

おしゃれなボタンが集まったサンプル集です。クリックでCSSコードをコピーすることができます。

Buttons with CSS gradients

ホバーするとグラデーションが変化するボタンデザインのサンプル集。控えめながらも魅力的なアニメーション付きのボタンが簡単に作れます。

Beautiful CSS 3D Transform Perspective Examples

Webサイト上で要素を3Dに見せるサンプルコードが13種類紹介されているページ。

図形

Blobs

流体シェイプの図形をブラウザ上で作成できるジェネレーター。SVGとFlutter用のコードを出力することができます。

Blobmaker

こちらも流体シェイプのジェネレーターです。SVGファイルのダウンロードと、SVGコードのコピーができます。

CSS Triangle Generator

三角形のCSSコードを出力することができるジェネレーター。向きや形状、大きさなどが調整可能です。

Fancy Border Radius Generator

border-radiusを使った簡易な流体シェイプが作れるCSSジェネレーター。要素の切り抜きに使えます。

Blobbb

流体シェイプを作ってコードを出力できるジェネレーター。背景パターンの設定も可能です。

clip-path

Clippy

画像の切り抜きなどに使えるclip-pathのコードを出力できるCSSジェネレーター。サンプルも豊富に用意されています。

区切り線

Get Waves

セクションの区切りなどに使える波状の図形のSVGコードが出力できるジェネレーター。形状や複雑さ、向きや色などをカスタマイズすることができます。

CSS Section Separator Generator

HTMLとCSSで作られた6種類の区切り線のコードがエクスポートできるジェネレーター。それぞれサイズや形状の調整が可能です。

SVG Waves

波状のSVGの図形を作成してエクスポートが可能なジェネレーター。自分でアンカーポイントの数や位置を指定することができます。

背景

Haikei

背景に使えるパターンや図形を簡単に生成できるジェネレーター。作成した背景はSVGとPNGでダウンロードすることができます。


CSS Background Patterns

線や点、図形などを組み合わせた背景パターンのCSSが出力できるジェネレーター。サイズや透明度、大きさなどの調整が可能です。

Pure CSS Stripes Generator

背景で使えるストライプの背景パターンが作れるCSSジェネレーター。ストライプの数やサイズ、向きなどをカスタマイズすることができます。

その他

Hamburgers by Jonathan Suh

アニメーション付きのハンバーガーメニューボタンのコードが17種類紹介されているサンプル集。こちらはコードの出力ではなく、スタイルシート全体の読み込みとなるのでご注意を。

CSS Arrow Please

CSSで作られた吹き出しのコードを生成することができるジェネレーター。サイズや色などの変更が可能です。

On/Off Flipswitch HTML5/CSS3 Generator

トグルボタンのCSSコードを出力することができるジェネレーター。様々なカスタマイズが可能です。


Dashed Border Generator

CodePen上で作られた破線のボーダーを生成できるジェネレーター。実はborderではなく、background-imageを使って作られています。

CSS Duotone Generator

画像にデュオトーンのフィルタをかけることができるCSSジェネレーター。画像はアップロードすることができ、好きな色を選択してデュオトーンのフィルタを作成することができます。

Headers

よく見かけるヘッダーデザインが17個紹介されているサンプル集。それぞれHTMLコードとCSSコードが公開されています。

その他のCSS関連のおすすめ