linear-gradient (線形グラデーション)

square_gradation cssの基本

linear-gradientプロパティは「線形グラデーション」を指定する場合に使用します。

html

<div class="square_gradation"></div>

css

.square_gradation {
	width: 100px;
	height: 100px;
    background-image : linear-gradient(
		to bottom,
		#39a9d6 0%,
		#32c75f 50%,
		#2d424f 100%
	);
}

設定方法

指定方法

background-image : linear-gradient(方向, 開始色, 途中色, 終了色)

方向

to top
上方向
to right
右方向
to bottom
下方向(デフォルト)
to left
左方向
角度
degで指定(時計回り)

色指定
「#000000」(色コード)又は「カラーネーム」(red や gray 等)
※rgba()も可
位置
%で指定
タイトルとURLをコピーしました