html / css[CSS] 배경색 원형 그라디언트 넣기

기본문법 : CSS Syntax

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

 

background-image를 단축해서 background 로 적어줘도 된다.

background-color 에서는 그라디언트가 적용되지 않더라.

 

shape size at position

​

shape size:

기본은 ellipse (타원)이다. 따라서 생략하면 타원으로 설정된다.(grad1, grad2)

정원을 선택한다면 circle을 앞에 적어준다. (grad3)

​

See the Pen background-image: radial-gradient(ellipse, circle) by builderous (@nyjchoi) on CodePen.

 

 

position:

기준점을 잡아준다. (grad4)

at 뒤에 x축값 y축값을 적어준다.

left top은 0 0과 같다.

left right top bottom center 등으로 기준점을 잡을 수도 있고,

px, % 등의 단위로도 잡을 수 있다.

​

colors:

색상은 갯수 제한은 없다. 적어도 2가지 색상이상을 써야 그라디언트가 만들어 질것이다.

선형 그라디언트는 중심으로부터 색이 시작한다고 생각하면 된다. 색상 갯수에 맞춰서 영역을 고루 할당 받는다.

만약에 영역을 달리 주고 싶다면, 단위와 함께 수를 뒤에 적어주면 된다.

​

예) green 30%, red 50%, yellow 20% 혹은 green 30px, red 80px, yellow

​

수와 단위를 생략하면 남은 범위를 할당하는 것 같다.

​

closest-side : 기준점으로 부터 가까운면을 기준으로 원이나 타원이 만들어진다.

farthest-side : 기준점으로 부터 먼면을 기준으로 원이나 타원이 만들어진다.

closest-corner : 기준점으로 부터 가까운면을 기준으로 원이나 타원이 만들어진다.

farthest-corner : 기준점으로 부터 먼면을 기준으로 원이나 타원이 만들어진다.

​

See the Pen background-image: radial-gradient(closest,farthest -side, corner) by builderous (@nyjchoi) on CodePen.