색상이 직선 형태로 바뀌는 것이 선형 그러데이션이라면 원형 그러데이션은 원이나 타원이 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. 따라서 원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 합니다.
radial-gradient
radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다.
기본형
background : radial-gradient( shape | size | at position, color1, color2, .., color3 );
- shape : 원 모양인지 타원 모양인지 정합니다.
- size : 크기를 정합니다.
- position : 중심의 위치를 정합니다.
- color : 색을 정합니다.
예제
예제 1
- 아래의 예제로 하나씩 알아보겠습니다.
- 노란색, 초록색, 검정색으로 변하는 원형 그라데이션입니다.
<div class="box"></div>
.box {
margin: 0px auto;
width: 220px;
height: 220px;
background: radial-gradient( yellow, green, black );
}
예제 2
- 색 뒤에 길이를 넣어서 색상 중지 점(color-stop)을 정하면 색이 차지하는 범위를 조절할 수 있습니다.
.box {
margin: 0px auto;
width: 220px;
height: 220px;
background: radial-gradient( yellow 10%, green 62.5px, black 50% );
}
예제 3
- 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있습니다.
- 원일 때는 circle, 타원일 때는 ellipse를 입력합니다.
- 타원 모양의 ellipse가 기본값이므로, 값이 지정하지 않으면 타원 모양이 적용됩니다.
.box {
margin: 0px auto;
width: 100%;
height: 150px;
background: radial-gradient( ellipse, yellow, green, black );
}
예제 4
- 직사각형에서도 원 모양으로 그라데이션을 만들려면 circle를 입력합니다.
.box {
margin: 0px auto;
width: 100%;
height: 150px;
background: radial-gradient( circle, yellow, green, black );
}
예제 5
- 중심의 위치를 바꿉니다.
.box {
margin: 0px auto;
width: 220px;
height: 220px;
background: radial-gradient( at 30% 20%, yellow, green, black );
}
예제 6
- farthest-corner : 중심에서 가장 먼 코너에 그라데이션을 닿게 합니다. 기본 값입니다.
- farthest-side : 중심에서 가장 먼 사이드에 그라데이션을 닿게 합니다.
- closest-corner : 중심에서 가장 가까운 코너에 그라데이션을 닿게 합니다.
- closest-side : 중심에서 가장 가까운 사이드에 그라데이션을 닿게 합니다.
.fc {
background: radial-gradient( farthest-corner at 30% 40%, yellow, green, black );
}
.fs {
background: radial-gradient( farthest-side at 30% 40%, yellow, green, black );
}
.cc {
background: radial-gradient( closest-corner at 30% 40%, yellow, green, black );
}
.cs{
background: radial-gradient( closest-side at 30% 40%, yellow, green, black );
}