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

好きな色で線形・円形のグラデーションを作成し、角度を調整して、そのまま貼り付けられるCSSをコピー。画像としてダウンロードもできます。

グラデーションの色
種類
角度 135°
クリックでコピー

グラデーションとは?

グラデーションとは、2色以上の色がなめらかに移り変わる表現のことです。わずかなコードで奥行きとモダンな印象を加えられるため、Webデザインでは背景やボタン、ヘッダーなどによく使われています。

線形グラデーションと円形グラデーションの違い

線形グラデーションは直線に沿って色が変化し、その向きは角度で指定します(0°で上向き、90°で右向き)。円形グラデーションは中心点から円状に広がっていきます。このジェネレーターではどちらも作成でき、対応するCSS(linear-gradient または radial-gradient)を取得できます。

CSSでの使い方

コードをコピーして、要素の background プロパティに貼り付けるだけです。色はいくつでも追加でき、それぞれクリックして編集できます。合わせて使う配色が必要ならカラーパレットも試してみてください。グラデーションの上に文字を置く場合は、事前にコントラストを確認しておきましょう。