CSSグラデーション生成
見た目を見ながらグラデーションを作り、CSSをコピー。
ハンドルをドラッグしてストップを移動するか、バーをクリックして追加します。矢印キーでもハンドルを移動できます。
カラーストップ
- %
- %
- %
ブラウザ内で動作します。入力した内容はどこにも送信されません。
- ドラッグでストップを配置
- 線形・円形・円錐に対応
- 8種類のプリセット
CSSグラデーションの作り方
- プリセットを選ぶか、各ストップの色を設定します。
- バー上のハンドルをドラッグし、バーをクリックしてストップを追加します。
- CSSをコピーしてスタイルシートに貼り付けます。
グラデーションの種類を比較
| 種類 | 広がり方 | CSS関数 |
|---|---|---|
| 線形 | 指定した角度の直線に沿って | linear-gradient() |
| 円形 | 中心点から放射状に | radial-gradient() |
| 円錐 | カラーホイールのように中心点の周りを回転 | conic-gradient() |
グラデーションの種類別ブラウザ対応
| グラデーションの種類 | 必要な最小バージョン |
|---|---|
| 線形・円形 | 現行のすべてのブラウザ、プレフィックス付きならIE10まで対応 |
| 円錐 | Chrome 69、Firefox 83、Safari 12.1 |
このページが生成するCSSは常に単純なbackground-colorの行から始まるため、グラデーションを描画できないブラウザでも空白のボックスではなく最初のストップの色が表示されます。
より自然なグラデーションにするコツ
- 中間に3つ目のストップを加えると、単調な2色のグラデーションではなく、3色目を通じて溶け合うような印象になります。
- 溶け合わせずにくっきりした境界にしたい場合は、隣り合う2つのストップを同じ位置にします。
- 0degは下から上、90degは左から右です。どの角度にも180を足せば、ストップを入力し直さずにグラデーションの向きを反転できます。
- 円形グラデーションの形はボックスに合わせましょう。正方形の要素にはcircle、横長の要素にはellipseを使うと、グラデーションが間延びして見えません。
CSSグラデーション生成のFAQ
CSSでグラデーションを作るには？
background: linear-gradient(90deg, #ff7e5f, #feb47b)のように、backgroundプロパティにグラデーション関数を指定します。最初の値が方向で、その後に色（それぞれ位置を指定可能）が続きます。
線形・円形・円錐グラデーションの違いは何ですか？
線形グラデーションは直線に沿って色が変化し、円形グラデーションは中心点から放射状に広がり、円錐グラデーションはカラーホイールやパイチャートのように中心点を軸に色が回転します。
角度はどちらの方向を指しますか？
0degは下から上、90degは左から右、180degは上から下、270degは右から左です。円錐グラデーションでは、角度は回転の開始位置を決めます。
2色の間にくっきりした境界線を作るには？
隣り合う2つのストップを同じ位置にします。例えば赤を50%、青も50%にすると、その位置で色がグラデーションせずに切り替わります。
CSSグラデーションはすべてのブラウザで動作しますか？
線形と円形グラデーションは現行のすべてのブラウザで動作します。円錐グラデーションにはChrome 69、Firefox 83、Safari 12.1以降が必要です。ここで生成するCSSは、フォールバックとして単色の行から始まります。
CSSグラデーションはアニメーションできますか？
大きめのグラデーションのbackground-positionやbackground-sizeをアニメーションさせれば、動いているような効果が作れます。ストップの色自体をアニメーションさせるにはCSSの@propertyルールか簡単なスクリプトが必要です。ブラウザは2つのグラデーション値の間を自動で補間できないためです。
グラデーションを文字の色として使えますか？
はい。ここで作ったグラデーションのCSSをbackgroundに設定し、文字要素にbackground-clip: textとcolor: transparentを追加すると、ボックスを塗りつぶす代わりに文字を通してグラデーションが見えるようになります。