このCSSグラデーションジェネレーターで作れるもの

画像ファイルを使わず、CSS関数だけで色の流れを作るコードを出力します。同じ色を背景、ボタン、文字、枠線として見比べられます。

実際のUIに近い見え方を確認してから、スタイルシートに貼り付けるコードを選べます。

• linear、radial、conicを切り替えます。
• 色と位置を編集します。
• CSS変数と接頭辞の有無を選べます。
• 背景・ボタン・文字・枠線を比較します。

CSSグラデーションの作り方

最初に使う場所を決めます。広い背景、小さなボタン、文字の装飾では確認すべき点が違います。

• 種類を選びます。
• 種類に合う角度、中心、開始位置を調整します。
• カラーストップを追加または移動します。
• 用途別プレビューを確認します。
• 必要なCSSをコピーします。

linear、radial、conicの違い

linearは一方向に色が流れる基本形です。radialは中心から広がります。conicは中心の周りを回転するように色が並び、リングやダイヤル表現に向いています。

radialは線形の角度ではなく、形と中心位置で変化します。

• linear: カード、バナー、パネル
• radial: 光、スポット、円形アクセント
• conic: 色相環、ダイヤル、リング

カラーストップは色と位置で決まります

カラーストップは色だけでなくパーセント位置も含みます。同じ色でも位置を動かすと移り変わりの幅が変わります。

通常のUIでは2〜4個から始めると読みやすく、管理もしやすくなります。

• 2色: シンプルな開始と終了
• 3色: 中間色を調整
• 4色以上: 装飾性を強めたい場合

文字グラデーションと枠線グラデーションはCSSが違います

背景は`background`だけで足りますが、文字はbackground-clipと透明な文字色が必要です。枠線はborder-boxを使った重ね描きが必要になることがあります。

背景用コードをそのまま文字や枠線に貼ると期待通りに見えない場合があります。

• 文字: クリップと可読性を確認します。
• 枠線: 実際に枠が見えるか確認します。
• ボタン: ラベルとhover状態を見ます。

CSS変数と接頭辞を使う場面

同じ色の流れを複数の部品で使うならCSS変数が便利です。一度だけ使う装飾なら直接のCSSでも十分です。

接頭辞は互換性を確認したい場合に見ます。現代的な環境では標準構文を中心に整理します。

• 一度だけ: 直接コピー
• 複数箇所で再利用: CSS変数
• 互換性確認: 接頭辞を確認

コピー前にコントラストを確認する

グラデーションには明るい部分と暗い部分が同時に出ます。片側では読める文字が、別の位置では読めなくなることがあります。

実際の背景、文字色、hover状態、ダークモードで見てから使うのが安全です。

• 装飾より可読性を優先します。
• ボタンの文字は全状態で読める必要があります。
• 枠線は太さとコントラストを確認します。

generator、formatter、minifierの違い

このツールは新しいグラデーション値を作ります。CSS formatterは既存のCSSを整形し、minifierは配信用にサイズを小さくします。

まずこのツールで値を作り、プロジェクトに入れたあと必要なら整形や圧縮を行います。

• 新しいグラデーション: このツール
• 既存CSSの整形: CSS formatter
• 配信用の圧縮: CSS minifier

よくある失敗と確認順

変化が見えないときは、その操作が選択中の種類に効くか確認します。コピーしたCSSが効かないときは、別のCSSルールに上書きされている可能性があります。

• radialは角度では変わりません。
• 文字にはbackground-clipが必要です。
• 枠線にはborder-box型の指定が必要です。
• 公開前にclass名を変更します。