This page was translated from English by the community. Learn more and join the MDN Web Docs community.
<gradient>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
* Some parts of this feature may have varying levels of support.
시도해 보기
background: linear-gradient(#f69d3c, #3f87a6);
background: radial-gradient(#f69d3c, #3f87a6);
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
background: conic-gradient(#f69d3c, #3f87a6);
<section class="display-block" id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-height: 100%;
}
CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.
구문
그레이디언트 함수
<gradient> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.
선형 그레이디언트
가상의 선을 따라 여러 색 사이를 전이합니다. linear-gradient() 함수를 사용해 생성합니다.
<div class="linear-gradient">선형 그레이디언트</div>
div {
width: 240px;
height: 80px;
}
.linear-gradient {
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
원형 그레이디언트
중심점으로부터 바깥으로 여러 색 사이를 전이합니다. radial-gradient() 함수를 사용해 생성합니다.
<div class="radial-gradient">원형 그레이디언트</div>
div {
width: 240px;
height: 80px;
}
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
반복 그레이디언트
요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. repeating-linear-gradient()나 repeating-radial-gradient() 함수를 사용해 생성합니다.
<div class="linear-repeat">반복하는 선형 그레이디언트</div>
<br />
<div class="radial-repeat">반복하는 원형 그레이디언트</div>
div {
width: 240px;
height: 80px;
}
.linear-repeat {
background: repeating-linear-gradient(
to top left,
lightpink,
lightpink 5px,
white 5px,
white 10px
);
}
.radial-repeat {
background: repeating-radial-gradient(
powderblue,
powderblue 8px,
white 8px,
white 16px
);
}
원뿔 그레이디언트
원을 따라 여러 색 사이를 전이합니다. conic-gradient() 함수를 사용해 생성합니다.
<div class="conic-gradient">원뿔 그레이디언트</div>
div {
width: 200px;
height: 200px;
}
.conic-gradient {
background: conic-gradient(lightpink, white, powderblue);
}
보간
색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 <color> 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.
명세
| Specification |
|---|
| CSS Images Module Level 4 # gradients |
브라우저 호환성
Enable JavaScript to view this browser compatibility table.