[CSS] 그라디언트 gradient

선형 그라디언트 linear-gradient

background-image: linear-gradient(1색상, 2색상)

background-image: linear-gradient(lightsalmon, lightblue);

background-image: linear-gradient(to 진행방향, 1색상, 2색상)

to bottom이 기본값. (to top: 아래에서 위, right : 좌에서 우, left : 우에서 좌

(대각선은 top right, bottom left... 등 두 방향을 띄어쓰기로 구분해서 함께 작성.)

background-image: linear-gradient(to top, #E14D2A, #001253); color: #fff;

background-image: linear-gradient(각도조절 deg, 1색상, 2색상, 3색상, 4색상)

,(콤마)를 활용해 여러가지 색상을 작성하는 것도 가능.각도 조절 단위값 deg를 작성해 그라디언트의 진행 방향을 설정할 수 있음.

background-image: linear-gradient(25deg, #FDFDBD,#C8FFD4,#B8E8FC,#B1AFFF);

background-image: linear-gradient(각도조절 deg,  1색상 %, 2색상 %, 3색상 %)

색상 뒤에 띄어쓰기 후 %값을 입력하면  그 %위치에 해당 색상이 위치하게 할 수 있으며

그라디언트의 비율을 조절하는 것이 가능.

background-image: linear-gradient(90deg, #905E96 10%, #fff 40%, #FFD372 70%);

background-image: linear-gradient(투명 transparent,  1색상)

background-image: linear-gradient(transparent, #2192FF);

background-image: repeating-linear-gradient(deg,  1색상 위치값, 2색상 위치값)

그라디언트를 반복시킬 수 있다. 꼭 색상의 위치값을 작성해야 함.

background-image: repeating-linear-gradient(30deg, #829460 0, #F96666 30px);

background-image: repeating-linear-gradient(1색상 위치값 시작, 1색상 위치값 끝, 2색상 위치값 시작, 2색상 위치값 끝)

1색상과 2색상의 위치값 시작과 끝을 같게 설정하면 그라디언트 없이 명확한 색상의 반복도 가능.

background-image: repeating-linear-gradient(#367E18 0, #367E18 30px, #CC3636 30px, #CC3636 60px);

 

 

---

---

 

원형 그라디언트 radial-gradient

background-image: radial-gradient();

 

background-image: radial-gradient(#5CB8E4, #8758FF);

background-image: radial-gradient(#EFEFEF, #FFFAE7, #FFDE00, #D2001A);

background-image: radial-gradient(#533483 10%, #E94560 40%);

background-image: radial-gradient(circle, 1색상, 2색상)

영역의 비율과 상관없이 정 원의 형태 그라디언트 생성

background-image: radial-gradient(circle, #6FEDD6, #FF9551);

background-image: radial-gradient(circle, #293462 10%, #D61C4E 80%);

background-image: radial-gradient(circle closest-side at 위치값, 1색상, 2색상)

left에서 위치값, top에서의 위치값 순서로 작성. 해당 위치로 이동해서 그라디언트 생성

background-image: radial-gradient(circle closest-side at 10% 80%, #CFE8A9, #E64848);

background-image: repeating-radial-gradient(#FFB3B3 10%, #C1EFFF 12%);

background-image: repeating-radial-gradient(circle, #3FA796 0, #3FA796 30px, #FEC260 30px, #FEC260 60px);