radial-gradient 함수
radial-gradient 함수는 방사형
그라데이션을 지정합니다. 이 함수는 배경 이미지를 설정하는 속성:
background,
background-image
또는 테두리 이미지를 설정하는 속성:
border-image,
background-image-source에 적용됩니다.
문법
선택자 {
background: radial-gradient([모양 타입 위치], 색상1 크기1, 색상2 크기2...);
}
값
| 값 | 설명 |
|---|---|
| 모양 |
사용 가능한 값:
ellipse 타원형 그라데이션 (기본값),
circle 원형 그라데이션.
|
| 타입 |
그라데이션의 확장 방식을 지정합니다.
사용 가능한 값:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| 위치 |
키워드 at 뒤에
크기 단위를 사용하거나
키워드 top, bottom,
left, right, center를
다양한 조합으로 사용하여 위치를 지정합니다.
|
| 색상1 | 색상 단위로 지정한 그라데이션의 시작 색상. |
| 색상2 | 색상 단위로 지정한 그라데이션의 끝 색상. |
| 크기 | 크기 단위로 지정한 그라데이션 특정 색상의 확장 범위. |
타입 값
| 값 | 설명 |
|---|---|
closest-side |
그라데이션 모양이 요소의 가장 가까운 면과 일치합니다. |
closest-corner |
그라데이션 모양은 가장 가까운 모서리까지의 거리 정보를 기반으로 계산됩니다. |
farthest-side |
그라데이션이 요소의 가장 먼 면까지 확장됩니다. |
farthest-corner |
그라데이션 모양은 가장 먼 모서리까지의 거리 정보를 기반으로 계산됩니다. |
참고
타입과 모양의 순서는 바꿀 수 있지만, 위치는 첫 번째 매개변수의 맨 끝에 와야 합니다. 그라데이션 타입과 크기는 함께 사용할 수 없습니다 (당연히 서로 충돌하기 때문입니다). 크기 설정이 우선 적용됩니다.
예제 . 가장 간단한 형태
시작 색상과 끝 색상만 지정해 보겠습니다:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
예제 . 위치 추가
중심 위치를 지정해 보겠습니다:
30px - 왼쪽 여백, 100px - 위쪽 여백:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
예제 . 백분율로 위치 지정
백분율로 중심 위치를 지정해 보겠습니다:
30% - 왼쪽 여백, 50% - 위쪽 여백:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
예제 . 키워드로 위치 지정
키워드
top, bottom, left,
right, center를 다양한
조합으로 사용할 수 있습니다. 예를 들어 오른쪽 중앙에 그라데이션을
배치해 보겠습니다:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
예제 . 그라데이션 크기
이 경우 그라데이션은 다음과 같이 동작합니다:
0px부터 20px까지는 순수한
빨간색, 20px부터 60px까지는 빨간색에서 파란색으로 변하는
그라데이션, 60px 이후로는 순수한
파란색:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
예제 . 여러 색상 연속 사용
이 경우 그라데이션은 다음과 같이 동작합니다:
0px부터 20px까지는 순수한
빨간색, 20px부터 40px까지는
순수한 파란색, 40px부터
60px까지는 파란색에서 녹색으로 변하는 그라데이션,
60px 이후로는 순수한 녹색:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
예제 . 크기 + 위치
다른 색상의 크기와 그라데이션 중심 위치를 동시에 지정해 보겠습니다:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
예제 . 그라데이션 모양
그라데이션 모양은 첫 번째 매개변수로
지정하며 2가지 값: circle
(원형 그라데이션) 또는 ellipse (타원형
그라데이션, 기본값)을 가질 수 있습니다. 그런데 왜 지금까지
타원형 그라데이션을 본 적이 없을까요, 비록
기본값이더라도? 지금까지 요소의 모양이 정사각형이었기
때문입니다. 모양을 직사각형으로 바꾸면 타원형
그라데이션을 볼 수 있습니다:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
예제 . 원형 그라데이션
직사각형 요소 안에 원형 그라데이션을 만들어 보겠습니다.
이를 위해 키워드
circle를 사용하여 첫 번째 매개변수로
그라데이션 모양을 지정합니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
예제 . 위치 추가
이전 코드에 그라데이션 위치도 추가해 보겠습니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
예제 . 타입 farthest-corner + circle
그라데이션 모양은 요소의 가장 먼 모서리까지의 거리 정보를 기반으로 계산됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 farthest-corner + ellipse
그라데이션 모양은 요소의 가장 먼 모서리까지의 거리 정보를 기반으로 계산됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 farthest-side + circle
그라데이션이 요소의 가장 먼 면까지 확장됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 farthest-side + ellipse
그라데이션이 요소의 가장 먼 면까지 확장됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 closest-corner + circle
그라데이션 모양은 요소의 가장 가까운 모서리까지의 거리 정보를 기반으로 계산됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 closest-corner + ellipse
그라데이션 모양은 요소의 가장 가까운 모서리까지의 거리 정보를 기반으로 계산됩니다:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 closest-side + circle
그라데이션 모양이 요소의 가장 가까운 면과 일치합니다:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
예제 . 타입 closest-side + ellipse
그라데이션 모양이 요소의 가장 가까운 면과 일치합니다:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
함께 보기
-
linear-gradient함수,
선형 그라데이션을 생성합니다 -
repeating-linear-gradient함수,
반복되는 선형 그라데이션을 생성합니다 -
repeating-radial-gradient함수,
반복되는 방사형 그라데이션을 생성합니다
