本文へスキップ
patrache.tools

グラデーション生成

CSSグラデーション生成の無料オンラインツール。線形・放射状、方向・色・停止点を調整。コードコピー可能。ブラウザ処理。

タイプ
角度
90°
0%
100%
CSSコード
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockファイルはサーバーに送信されません
共有
埋め込み

このツールをサイトに埋め込む

CSSグラデーションを生成する無料オンラインツールです。 リニア、ラジアル、コニカルグラデーションを視覚的にデザインしCSSコードを即座にコピーできます。 ブラウザ内で処理されサーバー通信がありません。 Webデザインに最適です。

グラデーション生成の使い方は?

  1. グラデーションタイプを選択します。
  2. カラーストップを追加し色を設定します。
  3. 生成されたCSSコードをコピーします。

グラデーション生成に関するよくある質問

どのグラデーションタイプに対応?

リニア、ラジアル、コニカルグラデーションに対応しています。

CSSコードを直接コピーできますか?

はい、生成されたCSSグラデーションコードをワンクリックでコピーしてそのままWebサイトに適用できます。

グラデーションの中間に灰色の帯ができるのはなぜですか?

色相環で正反対にある2色を混ぜると、中間で彩度が0近くまで落ちて濁ったグレーを通過します。青とオレンジ、赤と緑の組み合わせでとくに起こりやすい現象です。2色の間に中間色を停止点として1つ加えればグレーを迂回でき、そもそも色相環で近い2色を選べばこの問題自体が起きません。

作成したCSSグラデーションを画像ファイルとして保存できますか?

はい。PNGとしてダウンロードできるので、スライドの背景やSNS画像、印刷物にそのまま使えます。ただしウェブページに入れる目的なら、画像よりCSSコードをそのまま使うほうがずっと有利です。ファイルを読み込む必要がなく表示が速いうえ、画面サイズが変わっても崩れず、拡大しても階段状のギザギザが出ないからです。

グラデーション生成を上手に活用するには?

  • 色相環で近い2色を使うと、中間に濁ったグレーの帯が出にくくなります。
  • バナーやカード背景では135度の斜めグラデーションがいちばん収まりよく見えます。
  • 文字を重ねるなら、いちばん明るい停止色との対比を先に確認しましょう。

Powered by Patrache Studio Tools

このサイトの広告を許可してください

ツールを利用するには、このサイトの広告ブロックを解除してください。広告収益で無料サービスを運営しています。

広告ブロッカーのアイコンからこのサイトのブロックを解除し、もう一度確認してください。