그라데이션 설정법

css 그라데션 주는 방법!

 

그라데이션은 크게 3가지가 있습니다.

1. 선형(linear-gradient)

2. 방사형(radial-garadient)

3. 각진 원형(conic-garadient)

 

각 속성엔 색상의 제한은 없지만 적어도 두가지 색상은 넣어줘야합니다.

 

1. 선형 그라이데이션(linear-gradient)

선형 그라이데이션은 기본적으로 위에서 아래로 진행됩니다. 하지만 방향을 바꿔 줄수도 있습니다.

색상 앞에 작성해주면 됩니다.

 

- 방향 전환

- 대각선 그라데이션

- 각도 사용

 

 방향 전환

- to bottom(default)

- to top

- to left

- to rignt

 

 대각선 그라데이션

시작하는 방향이 아닌 그라이데션이 진행되는 방향입니다.

- to bottom left

- to bottom right

- to top left

- top top right

 

각도 사용

deg를 사용하면 시계방향으로 그라이데션이 진행됩니다. 음수를 사용하면 반시계 방향으로 진행됩니다.

- 45deg

- 180deg

linear-gradient(to bottom, red, blue);
linear-gradient(to bottom left, red, blue);
linear-gradient(45deg, red, blue);

 

색상 컨트롤 하기

 

다양한 컬러

- 기본적으로 2개는 필수, 추가는 제한 없음

linear-gradient(red, blue, green, pink, yellow);

 

- 색상 변환점 관리

 

색상의 변환점을 관리해 그라이데이션 컨트롤 할 수 있습니다. 절대 값, 퍼센트 값을 사용할 수 있습니다. 시작하는 색은 0% 부터 시작이고 마지막 색은 100%에서 끝납니다. 위치를 지정하지 않으면 특정 색상이 알아서 계산합니다. 

각각의 색상은 두개의 변환점을 가질 수 있습니다. 

linear-gradient(red 10%, blue);
linear-gradient(red 150px, blue);
linear-gradient(red 150px, blue 0)

 색상과 색상 사이의 중간점을 컨트롤 할 수 있습니다. 다음과 같이 설정하면 10%에서 레드와 블루의 중간점에 도달하게 됩니다.

linear-gradient(to left, red, 10%, blue);

 

- 그라데이션 쌓기, 투명도 조절

그라데이션을 여러개 사용해서 쌓을 수도 있고, rgba를 이용해 투명도를 조절할 수 있습니다

linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);