Functions

Draft

<gradient>gradientradial-gradient([<string>shape,] <color>color-stop1 [<length>,<percentage>rate], <color>color-stop2 [<length>,<percentage>rate][, ..])

배경이미지로 원형 그라디언트를 생성해서 값으로 사용한다.

설명

CSS에서 가능한 방법으로 색조를 형성할 색상을 매개 변수로 추가한다. 인수 설정 방식에 따라 다양한 원형 그라디언트를 만들수 있다. rgba() 함수를 이용하여 색상을 설정하는 경우에는 투명도가 반영된 그라디언트를 만들어 낼 수 있다.

구문

background-image:radial-gradient(color-stop1,color-stop2[,..])기본형식CSS3
그라디언트로 적용하고자 하는 색을 CSS에서 가능한 방법으로 두 개 이상의 인수로 설정한다. 콤마(,)로 구분된 순서에 따라 위에서 아래로 적용된다.
background-image:radial-gradient(color-stop1rate,color-stop2rate[,..])기본형식CSS3
색상 값 다음에 공백을 주고 적용되는 요소의 크기에 대한 색상 위치를 비율로 설정해 색상의 간격을 조정할 수 있다.
background-image:radial-gradient(shape,color-stop1,color-stop2[,..])기본형식CSS3

첫 번째 인수로 원형의 타입을 설정하고 그 이후의 인수는 색조로 적용할 두개 이상의 색상을 정의한다. 원형의 타입은 'ellipse', 'circle'이 있다.

원형 그라데이션이 시작되는 중심점을 지정하고자 하는 경우에는 형태(ellipse, circle) 값을 지정할 때 다음과 같이  타입을 지정할 수 있다.

  • ellipse at left top
  • ellipse at left center
  • ellipse at 100% 50%
  • ellipse at left 10%
샘플 코드
background: radial-gradient(circle at left top);

 

매개 변수

<string>shape선택
기본값 ellipse
그라디언트의 모양을 ellipse, circle 값 중에서 설정한다. 기본 값은 ellipse(타원)이다.
<color>color-stop1필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate선택
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.
<color>color-stop2필수
CSS에서 가능한 색상 설정 방법으로 색상 값을 설정한다.
<length>,<percentage>rate선택
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.

반환

<gradient>gradient

지원 웹브라우저

예제/테스트 도구

(1) 인수 설정 방식에 따른 결과를 확인할 수 있는 샘플 코드

(2) 설정 테스트 도구