background-image: linear-gradient(color, color);

background-image: linear-gradient(degrees, color, color);

background-image: radial-gradient(color, color);

background-image: radial-gradient(circle, color, color);

background-image: radial-gradient(circle, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side at 45px 45px, color 0%, color 20%, color 100%);

* %는 위치값을 나타냄

그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.

* 방향 : 기본값은 위에서 아래로

*rgba 쓰면 rgba로 일관성 줘야함. #쓰면 안 먹힌다.

시작점은 생략하고 to로 목적지를 설정한다.(시작접을 설정하려면 to 없애면 됨)

to right

to top right (상단 오른쪽으로)

to bottom left (하단 왼쪽으로 )

*여러가지 색상 추가

background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3, #51b0dc);

*각도 지정하기

0deg는 아래에서 위 방향

45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)

90deg는 왼쪽에서 오른쪽 방향

180deg는 상단에서 하단 방향 

음수도 가능.

백그라운드

여러개의 이미지를 사용할 경우

먼저 쓴 이미지가 앞으로 나온다.