CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient

radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다.

문법

  • shape : 원 모양인지 타원 모양인지 정합니다.
  • size : 크기를 정합니다.
  • position : 중심의 위치를 정합니다.
  • color : 색을 정합니다.

아래의 예제로 하나씩 알아보겠습니다.

예제 1

노란색, 빨간색, 갈색으로 변하는 원형 그라데이션입니다.

예제 2

색 뒤에 길이를 넣어서 색이 차지하는 범위를 정할 수 있습니다.

예제 3

정사각형이 아닌 직사각형일 때 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있습니다. 원일 때는 circle, 타원일 때는 ellipse를 입력합니다. ellipse가 기본값이므로, 값이 없으면 타원 모양이 적용됩니다.

예제 4

직사각형에서도 원 모양으로 그라데이션을 만듭니다.

예제 5

중심의 위치를 바꿉니다.

예제 6

크기를 정합니다. 가능한 값은 farthest-corner, farthest-side, closest-corner, closest-side이고, 기본값은 farthest-corner입니다.

CSS 강좌