CSSグラデーション生成(linear・radial)
2色を選んで、CSSのグラデーション(linear-gradient・radial-gradient)のコードを生成します。プレビューを見ながら調整できます。
CSSグラデーション生成について
グラデーションは、2色以上の色を、なめらかにつなぐ表現で、Webサイトの背景・ボタン・ヘッダーなどによく使われます。CSSでは、linear-gradient(線形)やradial-gradient(円形)で、画像を使わずに実現できます。
2つの色と、種類・角度を指定すると、CSSのコードを生成し、プレビューで確認できます。生成されたコードは、そのままスタイルシートに貼り付けて使えます。角度は、0度が下から上、90度が左から右への変化です。
こんなときに使えます
- ボタンや見出しの背景に、グラデーションを付ける
- グラデーションの色や向きを、見ながら調整する
- デザインの背景色の候補を作る
使うときのポイント
- 色相が近い2色を使うと、自然なグラデーションになる
- 文字を重ねる場合は、コントラスト比も確認する
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、色1(HEX)が#2f6fed、色2(HEX)が#7ad3a6、種類が線形(linear)、角度(線形のみ)が135度です。数値を変えると、この結果もそれに合わせて変わります。
結果: background: linear-gradient(135deg, #2f6fed, #7ad3a6);
使い方
- 2つの色をHEXで入力します。
- 種類(線形か円形)と、線形の場合は角度を選びます。
- プレビューを確認して、CSSコードをコピーします。
計算方法・仕組み
linear-gradient(角度, 色1, 色2) は指定した角度に向かって色が変化し、radial-gradient(circle, 色1, 色2) は中心から外側へ色が変化します。
知っておきたい基礎知識
グラデーションは、2つ以上の色を滑らかに、つなぐ表現で、CSSでは、画像を使わずに、実現できます。linear-gradientは、直線状に、色が変化し、角度を指定して、向きを変えられます。radial-gradientは、中心から外側へ、円状に変化します。背景や、ボタン、見出しの装飾などに、よく使われます。
グラデーションの色を選ぶときは、色相が近い2色を選ぶと、自然で上品な印象に、色相が離れた2色を選ぶと、華やかで、目を引く印象になります。文字をグラデーションの背景に重ねるときは、文字が、読みにくくならないよう、コントラストを確認してください。生成したコードは、そのまま、CSSの、background に貼り付けられます。
間違えやすいポイント
- グラデーションの上の、文字の読みやすさを確認する
- 古いブラウザでは、表示が崩れる場合がある。主要なブラウザでの、表示を確認する
- 角度の向き(0degは上向き、90degは右向き)を取り違えやすい
よくある質問
- 3色以上のグラデーションは、作れますか?
- CSSでは、色をカンマで続けて、書くと、3色以上のグラデーションも、作れます。このツールの出力に、色を追加して、調整してください。
- 角度の、指定の仕方は?
- 0degは、下から上へ、90degは、左から右へ、180degは、上から下へ、色が変化します。