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°

その他の指定

ツールの使い方について

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

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

  • フリーランスとして生きていきたい。
  • HTML / CSSの書き方が分からない・不安がある
  • きちんと会社のホームページやブログを作ってみたい!
  • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
  • 好きな時間に好きな場所で仕事出来るようになりたい!
  • しっかり技術を身につけて、収入を上げたい。
  • 簡単に効率的にホームページを作れる方法やツールが知りたい!
  • 全くの初心者なので、プロからしっかりと学んでみたい
  • 外注すると高いので、自分で身に付けたい

こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。

各CSSプロパティの説明

gradient

CSSでは大きく3つのグラデーション方法があり、グラデーションを表現することができます。具体的には以下の3つがあります

  • linear-gradient(線形グラデーション)
  • radial-gradient(円形グラデーション)
  • conic-gradient(扇形グラデーション)

複数色を指定することにより、それぞれの色を経由してグラデーションします。
background-colorプロパティに指定すると勘違いされやすいですが、background-imageプロパティに指定します。
記述例) background-image: linear-gradient(red, blue);

linear-gradientは、直線上にグラデーションを表現します。主に、0% ~ 100%の間で複数の色の経由点を指定することができ、グラデーションの角度も指定することができます。

radial-gradientは、円形にグラデーションを表現します。主に、0% ~ 100%の間で複数の色の経由点を指定することができます。
また、形状を楕円(ellipse。初期値)・円形(circle)から選択することができます。グラデーションの開始初期位置は、要素の上下左右真ん中(X: 50%, Y: 50%)ですが、変更することが可能です。

conic-gradientは、扇形にグラデーションを表現します。主に、0 ~ 360deg(degree。角度)の間で複数の色の経由点を指定することができ、グラデーションの開始角度を指定することもできます。グラデーションの中心位置は、要素の上下左右真ん中(X: 50%, Y: 50%)ですが、変更することが可能です。

これらのグラデーション指定は、カンマ「,」で区切りで複数指定することができます。最初に指定したグラデーションが重なり順(レイヤー)が上になります。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より抜粋。