Functions

Editing

〈gradient〉linear-gradient([ <angle> | to <side-or-corner> ]? , <color-stop-list>)

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

설명

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

구문

[ <angle> | to <side-or-corner> ]? , <color-stop-list>
background-image:linear-gradient(<color-stop-list>);

그라디언트로 적용하고자 하는 색을 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〉선택

0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

〈color-stop-list〉필수

반환

〈gradient〉gradient

예제/테스트 도구

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

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

지원 웹브라우저