Functions

Draft

<gradient>gradientlinear-gradient([<angle>angle|<string>direction,] <color>color-stop1 [<length>,<percentage>rate], <color>color-stop2 [<number>,<percentage>rate][, ..])

배경 이미지로 선형 그라디언트를 생성하여 값으로 사용한다.

설명

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

구문

background-image:linear-gradient(color-stop1,color-stop2[,..])기본형식CSS3
그라디언트로 적용하고자 하는 색을 CSS에서 가능한 방법으로 두 개 이상의 인수로 설정한다. 콤마(,)로 구분된 순서에 따라 위에서 아래로 적용된다.
background-image:linear-gradient(color-stop1rate,color-stop2rate[,..])기본형식CSS3
색상 값 다음에 공백을 주고 적용되는 요소의 크기에 대한 색상 위치를 비율로 설정해 색상의 간격을 조정할 수 있다.
background-image:linear-gradient(angle,color-stop1,color-stop2[,..])기본형식CSS3
각도가 적용된 방향으로 그라데이션을 적용한다. 첫번째 인수를 단위 'deg'를 사용한 각도를 설정하고 나머지 인수들은 원하는 색상을 설정한다.
background-image:linear-gradient(direction,color-stop1,color-stop2[,..])기본형식CSS3
방향을 지정하여 그라데이션을 적용한다. 첫번째 인수로 지정된 방향 값을 설정하고 나머지 인수들은 원하는 색상을 설정한다.

매개 변수

<angle>angle선택
그라데이션 방향을 나타내는 0-360 사이의 각도
<string>direction선택
설정할 수 있는 값은 'left', 'top', 'right', 'bottom' 이며 대각선 방향으로 설정하고자 하는 경우에는 'left top', 'right bottom' 등의 방식으로 설정한다.
<color>color-stop1필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate선택
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.
<color>color-stop2필수
CSS에서 가능한 색상 설정 방법으로 색상 값을 설정한다.
<number>,<percentage>rate선택
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.

반환

<gradient>gradient

지원 웹브라우저

예제/테스트 도구

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

(2) 다양한 설정 방향 테스트 도구