Softonic

CSS グラデーション生成

ステップ 1 / 2
次へ

グラデーションは、ボタンやカード、ヒーローセクション、バッジに画像ファイルなしで洗練された印象を与えられます。このジェネレーターがCSSを代わりに書きます。線形か放射かを選び、2色を指定して、必要に応じて角度を設定し、できあがった background 宣言をそのままスタイルシートへコピーしてください。

グラデーションの作り方

  1. 1

    グラデーションの種類を選ぶ

    直線的な変化には線形、中心点から外側へ広がる色には放射を選びます。

  2. 2

    2色を選ぶ

    2つのカラーフィールドに任意の16進カラー（例: #2563eb と #16a34a）を入力します。

  3. 3

    角度を設定する（線形のみ）

    角度は度単位: 0deg が上、90deg が右、180deg が下を向きます。放射グラデーションでは角度は使われません。

  4. 4

    CSSを生成する

    ツールが入力値から `background:` 宣言を作成します。

  5. 5

    コードをコピーする

    宣言の1行をコピーし、スタイルシートの対象要素のルール内に貼り付けます。

線形グラデーション

background: linear-gradient(135deg, #2563eb, #16a34a);

角度は上から時計回りに進みます: 0deg = 上、90deg = 右、180deg = 下、270deg = 左。名前付きの方向を手で書くこともできます: to right は 90deg、to bottom left は 135deg と同じです。

放射グラデーション

background: radial-gradient(circle, #2563eb, #16a34a);

色は要素の中心から外側へ広がります。放射グラデーションには角度がありません。より細かく制御したい場合は、位置やサイズのキーワード（at 30% 40%、ellipse）を手で追加します。

カラーストップ

CSSグラデーションは2色以上を扱え、各ストップに位置を指定できます:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

同じ位置の2つのストップはハードストップになり、色が混ざらずに瞬間的に切り替わります。分割背景に便利です。

ヒント

  • 赤から青へのグラデーションは、デフォルトのsRGB補間だと中間が灰色がかります。oklch での補間なら混ざりが鮮やかなままです: linear-gradient(in oklch, red, blue)（モダンブラウザで対応）。
  • transparent は無色ではありません。sRGBでは rgba(0,0,0,0) なので、透明へのフェードは暗い灰色を通ります。代わりに rgba(color, 0) を使いましょう。
  • グラデーションはモダンブラウザではGPUで描画され、どのサイズでもほぼコストがかかりません。グラデーション間のアニメーションは対応しておらず、急に切り替わります。代わりに追加レイヤーの不透明度をアニメーションさせましょう。
  • テキストの塗りつぶし: 宣言を background-clip: text; color: transparent; と組み合わせると、テキストをグラデーションで塗れます。枠線には、モダンブラウザで border-image: linear-gradient(...) 1; が使えます。

よくある質問

ボタンやヒーローなど、上下や斜めに流れる方向性のある変化には線形。スポットライトやグローのような、中心点から外側へ広がる効果には放射を選びます。

角度は線形グラデーションの変化の向きを決めます。0deg が上、90deg が右で、そこから時計回りに進みます。放射グラデーションでは角度は使われません。

デフォルトのsRGB補間は色成分の平均を取るため、彩度の低い中間点になります。代わりに oklch で補間すると（linear-gradient(in oklch, red, blue)）、中間でも鮮やかな混ざりが保たれます。

CSSは2つの background-image 値の間を補間できず、切り替えは急になります。一般的な回避策: 重ねたグラデーションの不透明度をアニメーションさせるか、大きな固定グラデーション上で background-position を動かします。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。