TIL65-01 css로 그라데이션 효과 주기

그라데이션 효과 주기

• CSS에서 그라데이션 효과를 적용하는 방법은 다음과 같다.

1. linear-gradient
   linear-gradient() 함수는 시작점과 끝점을 지정하여 직선 방향으로 그라데이션 효과를 만든다. 다음은 예시 코드다.

background: linear-gradient(to bottom, #ff0000, #0000ff);

• 위 코드는 위에서 아래 방향으로 빨간색(#ff0000)에서 파란색(#0000ff)으로 그라데이션 효과를 만든다.(to left, to top 등으로 진행 방향을 설정한다.)

• deg값의 설정을 통해 선의 각도를 정하여 다른 형태의 그라데이션 효과도 줄 수 있다.

2. radial-gradient
   radial-gradient() 함수는 원형으로 그라데이션 효과를 만든다. 다음은 예시 코드다.

background: radial-gradient(circle, #ff0000, #0000ff);

• 위 코드는 중심부에서 빨간색(#ff0000)에서 바깥쪽으로 파란색(#0000ff)으로 그라데이션 효과를 만든다.