無料のCSS＆デザインツール
リアルタイムプレビューでCSSを視覚的に構築します。カラーパレット、グラデーション、シャドウ、ボーダー半径、flexboxレイアウト、イージングカーブ、レスポンシブなサイズ指定—見た目が整ったらCSSをコピーするだけ。
8 個のツールがこのカテゴリにあります · 100%無料 · 登録不要
すべての デザインと CSS
カラー変換ツール（HEX/RGB/HSL）
色をHEX、RGB、HSLの各形式間で変換します。視覚的に色を選ぶことも、値を手動で入力することもできます。
開く →CSS box-shadowジェネレーター
CSSのbox-shadow値を視覚的に作成します。リアルタイムでプレビューし、生成されたCSSをコピーできます。
開く →CSSグラデーションジェネレーター
線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。
開く →cubic-bezierイージングカーブジェネレーター
CSS用のcubic-bezierイージングカーブを作成します。標準のプリセットも含まれています。
開く →カラーパレットジェネレーター
任意のベースカラーから調和のとれたカラーパレットを生成します。補色、類似色、トライアド、モノクロマティックの各配色に対応しています。
開く →CSS border-radiusジェネレーター
複雑なCSSのborder-radius値を視覚的に作成します。各コーナーを個別にコントロールできます。
開く →CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。
開く →CSS Flexboxジェネレーター
CSSのflexboxレイアウトを視覚的に作成します。方向、配置、折り返し、間隔を調整しながら、結果をリアルタイムで確認できます。
開く →なぜCSSの視覚的ジェネレーターはデザイン作業を加速するのか
モダンなCSSは完全な制御を与えてくれますが、box-shadowの構文、グラデーションの停止点、cubic-bezierのイージングを手書きするのは骨が折れます。視覚的ジェネレーターを使えば、スライダーをドラッグし、結果がリアルタイムで更新されるのを見て、正確なCSSをコピーできます。CSSの知識の代わりにはなりませんが、値を試行錯誤する際の摩擦をなくしてくれます。プロトタイピングに使い、その出力をコードに取り込んでください。
2025年に学ぶ価値のあるモダンCSSの機能
流動的なタイポグラフィのためのclamp()（フォントサイズのブレークポイントごとのメディアクエリはもう不要）。動画や画像のレスポンシブなコンテナのためのaspect-ratio。二次元レイアウトのためのgrid（一次元にはflexboxを使う）。親と整列する入れ子のグリッドのためのsubgrid。親に基づくスタイリングのための:has()セレクタ。実行時に色を混ぜるためのcolor-mix()。すべてモダンなブラウザで利用できます。このページのCSS clamp()ジェネレーターは、最小値／最大値から正しく整形されたclamp()式を生成します。
デザイナーでない人のためのカラー理論
モノクロームのパレット（1つの色相、異なる明度）は、最も安全でプロフェッショナルな選択です。類似色（隣接する色相）は統一感と落ち着きを伝えます。補色は対比を生み、コール・トゥ・アクションに最適です。三色配色は鮮やかですがバランスを取るのが難しいです。カラーパレットジェネレーターは、あなたが選んだ任意のベースカラーからこれらすべてを計算します。アクセシビリティのためには、コントラスト比も確認してください。WCAG AAは本文テキストに4.5:1、大きなテキストに3:1を要求します。