CSS radial-gradient() 함수

정의와 사용법

CSS radial-gradient() 함수는 원형 변화gradient를 배경 이미지로 설정합니다.

원형 변화gradient는 그 중심에서 정의됩니다.

원형 변화gradient를 생성하려면 최소 두 개의 색표를 정의해야 합니다.

원형 변화gradient 예제:

예제

예제 1

색표가 균일하게 분포된 원형 변화gradient:

#grad {
  background-image: radial-gradient(red, green, blue);
}

직접 테스트해 보세요

예제 2

색표 분포가 다른 원형 변화gradient:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

직접 테스트해 보세요

예제 3

원형 형태의 원형 그래디언트:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

직접 테스트해 보세요

예제 4

다른 크기 키워드를 사용하는 원형 그래디언트:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

직접 테스트해 보세요

CSS 문법

radial-gradient(shape size at position, start-color, ... , last-color);
값 설명
shape

그래디언트의 형태를 정의합니다. 가능한 값:

  • ellipse(기본)
  • circle
size

그래디언트 크기를 정의합니다. 가능한 값:

  • farthest-corner(기본)
  • closest-side
  • closest-corner
  • farthest-side
position 그래디언트 위치를 정의합니다. 기본 값은 "center"입니다.
start-color, ... , last-color

색표는 그 사이에서 원활한 전환을 표시하고자 하는 색상입니다.

이 값은 하나의 색상 값으로 구성되며, 그 뒤에는 하나 또는 두 개의 선택적인 색표 위치(0%에서 100% 사이의 백분율 또는 그래디언트 축의 길이)가 따른다.

기술 세부 사항

버전: CSS3

브라우저 지원

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
radial-gradient()
26 10 16 6.1 12.1
두 위치의 색표
71 79 64 12.1 58

관련 페이지

튜토리얼:CSS 그래디언트

참조:CSS background-image 속성

참조:CSS 콘식그래디언트() 함수

참조:CSS 선형그래디언트() 함수

참조:CSS 반복콘식그래디언트() 함수

참조:CSS 반복선형그래디언트() 함수

참조:CSS repeating-radial-gradient() 함수