그라데이션 효과 사용하기

linear-gradient?

선형 그라데이션 효과를 만듬

linear-gradient 문법

linear-gradient( direction , color1, color2, …, color3 )

div {
  background: linear-gradient(direction, color1, color2, …, color3);
}

direction에는 그라데이션 방향을 입력

• to bottom : 위에서 아래로 (기본값)
• to top: 아래에서 위로
• to left: 오른쪽에서 왼쪽으로
• to right: 왼쪽에서 오른쪽으로
• Ndeg: N도의 방향으로

See the Pen Untitled by 혬 (@jexbagvl-the-reactor) on CodePen.

radial-gradient?

원형 그라데이션 효과를 만듬
mdn - radial-gradient

radial-gradient 문법

radial-gradient( shape size at position, color1, color2, ..., color3 )

div {
  background: radial-gradient(
    shape size at position,
    color1,
    color2,
    ...,
    color3
  );
}

입력할 값

• shape: 형태 (원, 타원 )
• size: 크기를 정의
• position: 중심 위치
• color: 색

See the Pen radial-gradient by 혬 (@jexbagvl-the-reactor) on CodePen.

그라데이션 컬러 추천해주는 사이트

- Web Gradient

https://webgradients.com/

• 원하는 그라데이션의 css값을 복사해서 사용할 수 있음