オンラインCSSグラデーション-ジェネレーター、メーカー、背景

Color

オンラインCSSグラデーションツール

CSS Gradientは、幸せな小さなWebサイトであり、Webサイトのグラデーションの背景を作成できる無料のツールです。 

CSSグラデーションを使用すると、指定した2つ以上の色の間のスムーズな遷移を表示できます。

CSSは、次の2種類のグラデーションを定義しています。

  • 線形グラデーション(下/上/左/右/対角)
  • 放射状グラデーション(中心によって定義されます)

CSS線形グラデーション

線形グラデーションを作成するには、少なくとも2つのカラーストップを定義する必要があります。カラーストップは、スムーズなトランジションをレンダリングする色です。グラデーション効果とともに、開始点と方向(または角度)を設定することもできます。

構文

background-image: linear-gradient(directioncolor-stop1color-stop2, ...);

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle: