このツールについて
CSSで背景のグラデーションを作成するツールです。線形と放射状に対応し、各カラーストップの色と位置を個別に設定できます。ストップを追加・削除して、色の移り変わりを確認できます。
使い方
- 線形または放射状のグラデーションを選びます。
- 2～6個のカラーストップを設定し、位置を0～100%で指定します。
- 線形グラデーションでは角度を0～360°で調整できます。スライダーと数値入力は連動します。
- プレビューを確認してCSSをコピーします。「リセット」や「サンプルを読み込む」で配色を比較できます。
使用例
- 0%に赤、100%に青を置くと、基本的な2色のグラデーションになります。
- 50%の位置に3つ目の色を追加すると、中間部分の色の変化を調整できます。
- 同じ位置に異なる色のストップを置くと、はっきりした色の境界を作れます。
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);仕組みとCSSの解説
linear-gradient()は指定方向に沿ってカラーストップ間の色を補間し、radial-gradient()は中心から外側へ色を変化させます。不透明なHEXとして色を検証し、位置をパーセントの範囲に制限して、有効なbackground宣言を生成します。
主な用途
- Webページの背景やボタンの配色を作る。
- 複数色のグラデーションの方向を手早く比較する。
- カラーストップの位置が色の変化に与える影響を学ぶ。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
linear-gradientとradial-gradientの違いは何ですか？
線形グラデーションは直線に沿って色が変化し、放射状グラデーションは中心から外側へ変化します。放射状の形には円や楕円があります。
CSSグラデーションは画像ですか？
ブラウザーが生成するCSS画像です。画像ファイルをダウンロードしたり、オンライン生成サービスを利用したりする必要はありません。
線形グラデーションの方向はどう変えますか？
角度を変更します。0degは上、90degは右、180degは下を向きます。
3色以上使えますか？
はい。2～6個のカラーストップを使用でき、それぞれの色と位置を個別に設定できます。