グラデーションCSS生成ツール

グラデーションCSS生成ツールの使い方

グラデーションCSS生成ツールは、色と方向からグラデーションのCSSコードを生成できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 種類（直線／円形）を選びます。
2. 直線の場合は方向を選びます（角度を指定することもできます）。
3. 色をプラスボタンで追加します（最大5色）。カラーピッカーでも選べます。
4. プレビューで見た目を確認し、生成されたCSSコードをコピーして使います。

linear-gradientとradial-gradientについて

linear-gradientは指定した方向に沿って色が直線的に変化するグラデーションです。radial-gradientは中心から外側に向かって円形に色が変化します。どちらもbackgroundまたはbackground-imageプロパティに指定して使います。

• 方向は「to right」のようなキーワード指定と、「45deg」のような角度指定のどちらも使えます。0degは上方向、90degは右方向を指します。
• 色の数を増やすほど、複数色を経由する複雑なグラデーションになります。各色は均等な間隔で配置されます。
• radial-gradientは中心位置や形状（円・楕円）も細かく指定できますが、このツールでは中心・円形の基本形のみを生成します。

よくあるつまずきポイント

• 生成したCSSはbackgroundプロパティに指定します。background-colorには効かないため注意してください。
• グラデーションの上に文字を乗せる場合、場所によって背景色が変わるため、文字色とのコントラストが不十分になる箇所が出ることがあります。コントラスト比チェックツールで両端の色を確認するのがおすすめです。
• 古いブラウザ（IE等）では-webkit-などのベンダープレフィックスが必要な場合がありますが、現在の主要ブラウザでは不要です。