結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
CSSグラデーション生成ツールは、2つの色からbackground宣言を作成します。任意の角度の直線に沿って色を混ぜるなら線形を、中心から外側へ円形に広げるなら放射状を選びます。コントロールを動かすとプレビューが更新され、出力欄にはbackground: linear-gradient(90deg, #3b82f6, #8b5cf6);のような、そのまま貼り付けられる1行が表示されます。
線形グラデーションでは、角度が方向を決めます。0degは下から上、90degは左から右、180degは上から下に向かいます。放射状グラデーションは角度を無視してcircleを使うため、1つ目の色が中央に来ます。どちらの形式も現在のすべてのブラウザでベンダープレフィックスなしに使えるので、生成された1行はそのまま動作します。
こんなときに使えます
- ヒーローセクションやCTAボタンに、控えめな2色の背景を付けるとき。
- グラデーションの背景画像をCSSに置き換え、ページで読み込むファイルを1つ減らすとき。
- デザインシステムに採用する前に、ブランドカラーの組み合わせを並べて試すとき。
- ロゴやイラストの背後に、柔らかな放射状の光を作るとき。
使用例
入力
タイプ：線形
角度：90
色：#3b82f6、#8b5cf6出力
background: linear-gradient(90deg, #3b82f6, #8b5cf6);このツールについての質問
3つ目の色を追加するにはどうすればよいですか？
関数内のリストにカンマ区切りで追加します：linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)。#8b5cf6 40%のように各色に位置を指定して、どこで色が混ざるかを調整することもできます。
グラデーションの上のテキストは読みやすいままですか？
カラーコントラストチェッカーで、文字色をグラデーションの両端の色と比べてチェックしてください。どちらかの端が基準を満たさない場合は、その色を暗くするか、テキストの背後に半透明のオーバーレイを追加します。
グラデーションを枠線やテキストの塗りに使えますか？
はい、CSSを追加すれば使えます。テキストの場合は、グラデーションをbackgroundに設定してから、background-clip: textとcolor: transparentを追加します。枠線の場合は、border-imageに同じグラデーション関数を指定できます。
グラデーションに縞模様（バンディング）が見えるのはなぜですか？
バンディングは、似た2色を広い範囲に引き伸ばしたときに発生します。もっと離れた色を選ぶか、範囲を狭めるか、中間のカラーストップを追加して1段階ごとの差を小さくしてください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。