CSS・コーディングの無料ツール
影・角丸・グラデーションなどCSS生成
タイポグラフィスケール生成
基準サイズと比率で見出し一式＋clamp出力。
色覚シミュレーション
配色をP型・D型・T型の見え方で確認。
カラースケール生成
基準色から50〜900の10段階＋コントラスト比。
CSSグラデーション生成
2色と角度からグラデCSSを生成。
box-shadow生成
影をスライダーで調整しCSS出力。
角丸（border-radius）生成
4隅の角丸を調整しCSS出力。
Flexboxジェネレーター
配置を選んでflexのCSSを生成。
px / rem 変換
基準サイズからpx⇄remを換算。
clip-pathジェネレーター
三角・星など好きな形に切り抜き。
CSS filterジェネレーター
ぼかし・明るさ等のfilterを生成。
Glassmorphism生成
すりガラス風UIのCSSを生成。
text-shadow生成
文字の影を調整しCSS出力。
ボタンジェネレーター
色・角丸・影でボタンCSSを生成。
CSSローダー生成
スピナー・ドット・バーなど5種のローディングアニメをCSS生成。
CSSメディアクエリ早見表
Tailwind・Bootstrap・Foundationのブレークポイントと@mediaクエリを一覧表示。コピーボタン付き。
CSSアニメーション生成
フェードイン・バウンスなど6種のプリセットをスライダーで調整してCSSをコピー。
CSSテーブルデザイナー
5種プリセット（ストライプ・ボーダー・ミニマル・カード・ダーク）からデザインを選んでCSSをコピー。
CSS・コーディングのツールについて
影・角丸・グラデーション・アニメーションなど、CSSのコードを生成するツールをまとめています。値を少しずつ変えながらプレビューで確認できるため、書いては保存して確認する往復を減らせます。
生成したコードはそのままコピーして使えます。解説には、値の意味と「自然に見せるための目安」も記載しています。
目的から選ぶ
- 装飾する → box-shadow生成、角丸生成、CSSグラデーション生成
- レイアウト → Flexboxジェネレーター、メディアクエリ早見表、px / rem変換
- 動きをつける → CSSアニメーション生成、イージング（cubic-bezier）作成、CSSローダー生成
最終更新: 2026-07-23