CSS. gradient

그레이디언트란?

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.

포토샵 등의 소프트웨어를 사용하여 제작하면 이미지를 확대하였을 때 해상도 문제가 있어

그레이디언트를 사용하는게 더 낫다고 한다.

gradient의 종류

색 번짐 방향을 기준으로 선형 그라디언트와 원형 그라디언트로 나뉜다.

• 선형 그라디언트 (Linear Gradients) : 상하, 좌우, 대각선
• 원형 그라디언트 (Radial Gradients) : 원형
• 반복 선형 그라디언트

선형 그라디언트 (Linear Gradients)

기본형 background: linear-gradient(direction, start, middle, end);

 

• direction : 변화 방향

 

• to bottom : 위에서 아래로(기본 값)
• to top : 아래에서 위로
• to right : 왼쪽에서 오른쪽으로
• to left : 오른쪽에서 왼쪽으로
• to bottom right : 대각선으로 (좌상단에수 우하단으로)

 

• start : 시작 색깔
• middle : 중간 색깔(쉼표를 이용해 여러 개 나열 가능)
• end : 종료 색깔

 

원형 그라디언트 (Radial Gradients) : 원형

기본형 background : radial-gradient(shape size at position, strat, middlem end);

 

• shape : 원 모양(circle)인지 타원 모양(ellipse)인지 결정
• size : 크기를 결정
• position : 중심 위치를 결정
• color : 색 결정

반복 선형 그라디언트

기본형 background: repeating-linear-gradient(direction, start, middle, end);