<gradient>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
CSS グラデーションは内在的な寸法を持ちません。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。
構文
<gradient>
データ型は、以下のリストにある関数型のうちの一つによって定義します。
線形グラデーション
線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 linear-gradient()
関数で生成されます。
放射グラデーション
放射グラデーション (radial gradient) は、色が中心点 (origin) から連続的に変化します。 radial-gradient()
関数で生成されます。
扇形グラデーション
扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 conic-gradient()
関数で生成されます。
反復グラデーション
反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 repeating-linear-gradient()
、repeating-radial-gradient()
、repeating-conic-gradient()
関数で生成されます。
補間
色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。(古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)
形式文法
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>
<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
例
線形グラデーションの例
単純な線形グラデーションです。
.linear-gradient {
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
放射グラデーションの例
単純な放射グラデーションです。
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30 144 255));
}
扇形グラデーションの例
単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。
.conic-gradient {
background: conic-gradient(pink, coral, lime);
}
反復グラデーションの例
単純な線形および放射の反復グラデーションの例です。
.linear-repeat {
background: repeating-linear-gradient(
to top left,
pink,
pink 5px,
white 5px,
white 10px
);
}
.radial-repeat {
background: repeating-radial-gradient(
lime,
lime 15px,
white 15px,
white 30px
);
}
.conic-repeat {
background: repeating-conic-gradient(lime, pink 30deg);
}
仕様書
Specification |
---|
CSS Images Module Level 4 # gradients |
ブラウザーの互換性
BCD tables only load in the browser