なめらかグラデーション
2色と角度から、見た目を確認しながらグラデーションのCSSを作成します。
使い方
- 開始色・終了色を選び、色が進む向きを角度で指定します。0度は下から上、90度は左から右です。
- 結果を作成し、コピーしたbackground宣言を対象要素のCSSルール内に貼り付けます。
- 文字を重ねる場合は明るい部分・暗い部分の両方で読みやすさを確認します。
このツールが向いている作業
見出しの帯やカード背景に使う、2色の線形グラデーションを作ります。色を変えた結果とCSSを並べて確認できるので、デザイン案を実装へ渡すときに使えます。
入力と設定
結果
入力例と実際の出力
- 開始色: #000000
- 終了色: #ffffff
- 角度（度）: 90
出力例: background: linear-gradient(90deg, #000000 0%, #ffffff 100%);
この例では左端が黒、右端が白になります。色の停止位置は0%と100%で固定です。途中の色を指定する多段グラデーションや放射状の背景は作成しません。
仕様と注意点
色の位置は0%と100%です。CSSの角度は0度が上向き、90度が右向きです。
次の作業・使い分け
コントラスト比チェック — 背景の上に文字を載せる前に、色の組み合わせを確認できます。
よくある質問
角度を変えるとCSSでは何が変わりますか？
linear-gradient()の最初の数値が変わります。180度は上から下への変化です。要素の縦横比によって斜め方向の見え方も変わります。
背景色と文字色の組み合わせも判定しますか？
判定しません。文字を載せる場所の背景色を取り出し、コントラスト比チェックで確認してください。
放射状や3色以上のグラデーションも作れますか？
2色の線形グラデーション用です。色の位置は0%と100%に固定され、追加の色や放射状の指定はありません。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。