Front-endTools

CSS グラデーション ジェネレーター

背景にグラデーションをかけるための、ジェネレーターです。
基本的な(線形)グラデーションのlinear-gradient、radial-gradient(円形)、conic-gradient(扇形)などに対応し、直感的にグラデーションを生成することができます。
複数のグラデーションの指定にも対応している為、重なり順が上のグラデーションの指定色を透過させる事で、複数のグラデーションを混ぜた色を生成することも可能です。
円形・扇形グラデーションにおいては、中心位置を直感的に操作するためのツールを用意している他、線形・扇形グラデーションの角度(deg)を直感的に操作することができる機能も搭載しています。
グラデーションの繰り返しにも対応しています。
また、70種類以上のサンプルから選択しカスタマイズできます!

グラデーションサンプル一覧(見本)。ベースとなるものを選択し、編集することができます

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。

2色のグラデーション

3色以上のグラデーション

その他

.original-gradient {
  height: 200px;
  width: 90%;
}

ツールを使用するにあたっての注意

  • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
  • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
  • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

  • グラデーション部分をクリックすることで、色の経由点(color-stop)を追加することができます。
  • 各色の部分(色の経由点)をドラッグ&ドロップで左右に位置を変更することができます。
単位:%
R
G
B
A
色の透過率を一括指定
%
  1. rgba(247, 166, 12, 1)
  2. rgba(255, 34, 87, 1)
  3. rgba(154, 39, 238, 1)
  4. rgba(35, 102, 247, 1)
deg
  • 0 / 360°
  • 90°
  • 180°
  • 270°

その他の設定

ツールの使い方について

・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

各CSSプロパティの説明

gradation
CSSでは大きく3つのグラデーション方法があり、グラデーションを表現することができます。
背景を指定できるところであれば、基本的にはどこにでも指定することができます。
グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。具体的には以下の3つがあります。
  • linear-gradient(線形グラデーション)
    直線上にグラデーションを表現します。主に、0% ~ 100%の間で複数の色の経由点を指定することができ、グラデーションの角度も指定することができます。
    linear-gradient(グラデーションの角度または方向, 開始色, 途中(経由)色, 終了色) のように指定することができます。
    グラデーションの角度または方向は必須ではありません。60deg(degはdegreeの略で角度の意味)など、角度を指定できる他、to top, to right, to bottom, to left などのようにテキストで指定することも出来ます。初期値は180degです(to bottomを指定しているのと同じ)。
    途中色は省略することも出来ます。途中色を指定した場合、必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。
    記述例)background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 50%, rgba(35, 102, 247, 1) 90%);
  • radial-gradient(円形グラデーション)
    円形にグラデーションを表現します。linear-gradient同様 0% ~ 100%の間で複数の色の経由点を指定することができます。
    radial-gradient(正円か楕円 グラデーションの開始から終了までの位置 at 中心位置, 開始色, 途中(経由)色, 終了色);のように指定することができます。
    正円か楕円は初期値が楕円(ellipse)で円形(circle)を選択することもできます。
    グラデーションの開始から終了までの位置は「最も近い辺(closest-side)」「最も遠い辺(farthest-side)」「最も近い角(closest-corner)」「最も遠い角(farthest-corner)」の4つから指定することができ、farthest-cornerが初期値です。省略可能な値です。
    中心位置(グラデーションの開始初期位置)は、初期値が要素の上下左右真ん中(X: 50%, Y: 50%)で省略可能です。
    途中(経由)色はlinear-gradient同様、省略することが可能で、必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。
    記述例)background-image: radial-gradient(circle farthest-side at 17% 89%, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 50%, rgba(35, 102, 247, 1) 90%);
  • conic-gradient(扇形グラデーション)
    扇形にグラデーションを表現します。主に、0 ~ 360deg(degree。角度)の間で複数の色の経由点を指定することができ、グラデーションの開始角度を指定することもできます。
    conic-gradient(from グラデーションの開始角度 at 中心位置, 開始色, 途中(経由)色, 終了色) のように指定することができます。
    グラデーションの開始角度は省略可能で、初期値は0degです。
    中心位置は、radial-gradient同様、初期値が要素の上下左右真ん中(X: 50%, Y: 50%)で省略可能です。
    途中(経由)色はlinear-gradient同様、省略することが可能で、必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。
    記述例)background-image: conic-gradient(from 15deg at 26% 30%, rgba(247, 166, 12, 1) 36deg, rgba(255, 34, 87, 1) 180deg, rgba(35, 102, 247, 1) 324deg);
background-colorプロパティに指定すると勘違いされやすいですが、background-imageプロパティに指定します。
記述例) background-image: linear-gradient(red, blue);
repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient の各プロパティによって、反復グラデーションを指定することもできます。
これらのグラデーション指定は、カンマ「,」で区切りで複数指定することができます。最初に指定したグラデーションが重なり順(レイヤー)が上になります。rgbaなどで透明度をあげないと下に重なるグラデーションが見えなくなるので、注意が必要です。
最初に指定されたものが最上位に、最後のものが最下位になります。
記述例) background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
MDN Web Docsより抜粋。
color
Webで色を指定する場合は、「HEX」「RGB」「HSL」を使用することが多いです。
まず、一番よく目にするHEXは(hexadecimal number/ヘキサデシマル)で、16進数による色の表現方法です。#1234ab のような形で表現されます。
#以降の6桁は1~2桁目が赤(red)、3~4桁目が緑(green)、5~6桁目が青(blue)の値です。各数値の色の強さにより様々な色を表現します。
それぞれの2桁が同じ数値の場合には3桁での表現をすることができます。例えば、#aa9933の場合#a93とすることが可能です。
透明度もHEXで指定したい場合は、8桁の数値で表現することができ、7~8桁目で同じく16進数で表現します。80%の透明度を指定したければ、#aa9933CC のように指定します。
RGBはHEXと同じく、赤(red)・緑(green)・青(blue)で色を表現することができるものです。
各値は0 ~ 255の範囲で指定することができ、rgb(赤の値, 緑の値, 青の値) のような形で表現します。
記述例)rgb(10, 50, 220)
透明度を指定したい場合には、rgba(赤の値, 緑の値, 青の値, 透過度(alpha)) のような形で指定することができます。
alpha値は0~1で指定することができ、例えばrgba(0, 0, 255, .5) のような形で指定することが可能です。
HSLは「Hue(色相)」「Saturation(彩度)」「Lightness(明度)」の略です。
HSLで色を指定する場合は、この3要素で色を指定します。色相(色の種類・色合い)が決定されると、あとは彩度と明度の調整で色を決めていくことができるので、RGBより直感的に色を決めることができます。
hsl(色相, 彩度, 明度)のような形で指定することができます。
  • Hue(色相):基本的には 0 ~ 360 の間で指定することができます。この範囲を超える数値を指定した場合は、周回して考えられる為、例えば380を指定した場合には20と同じ指定となります。
  • Saturation(彩度):0 ~ 100% の間で指定することができます。100%に近づくほど色が鮮やかになります。逆に0%に近づくほどモノクロ(白黒)になっていきます。
  • Lightness(明度):0 ~ 100% の間で指定することができます。100%に近づくほど明るくなります。逆に0%に近づくほど暗くなっていきます。
透明度を指定したい場合には、hslaがあります。これはrgbaと同じく最後のaがalpha(透明度)を表します。
alpha値は0~1で指定することができ、例えば hsla(80, 80%, 50%, .5) のような形で指定することが可能です。