Functions

Editing

〈gradient〉radial-gradient([ <ending-shape> || <size> ]? [at <position> ]?, <color-stop-list>)

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

설명

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

구문

[ <ending-shape> || <size> ]? [at <position> ]?, <color-stop-list>
background-image:radial-gradient(color-stop1,color-stop2[,..])

그라디언트로 적용하고자 하는 색을 CSS에서 가능한 방법으로 두 개 이상의 인수로 설정한다. 콤마(,)로 구분된 순서에 따라 위에서 아래로 적용된다.

background-image:radial-gradient(color-stop1rate,color-stop2rate[,..])

색상 값 다음에 공백을 주고 적용되는 요소의 크기에 대한 색상 위치를 비율로 설정해 색상의 간격을 조정할 수 있다.

background-image:radial-gradient(shape,color-stop1,color-stop2[,..])

첫 번째 인수로 원형의 타입을 설정하고 그 이후의 인수는 색조로 적용할 두개 이상의 색상을 정의한다. 원형의 타입은 '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);

 

매개 변수

〈ending-shape〉선택
기본값 ellipse
〈gradient-size〉선택
〈position〉선택

박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

〈color-stop-list〉필수

반환

〈gradient〉gradient

예제/테스트 도구

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

(2) 설정 테스트 도구

지원 웹브라우저