방사형 그래디언트의 크기를 지정하려면 CSS의 radial-gradient() 함수를 사용합니다. 이 함수는 배경 이미지(background-image)로 방사형 그래디언트를 적용하며, 함수 내 두 번째 매개변수에 원하는 크기를 지정할 수 있습니다.
background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));
크기 값으로 사용할 수 있는 키워드는 다음과 같습니다.
- farthest-corner (기본값): 중심에서 가장 먼 모서리까지를 기준으로 함
- closest-side: 중심에서 가장 가까운 변까지를 기준으로 함
- closest-corner: 중심에서 가장 가까운 모서리까지를 기준으로 함
- farthest-side: 중심에서 가장 먼 변까지를 기준으로 함
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(40% 50px at center,
rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>방사형 그래디언트 크기 예제</h1>
<div id="radial"></div>
</body>
</html>실행 결과
위 코드를 실행하면 200×200px 크기의 요소 안에 중앙을 기준으로 초록색, 하늘색, 남색이 부드럽게 퍼지는 방사형 그래디언트가 나타납니다. 이처럼 radial-gradient() 함수에 크기 값을 직접 지정하면 그래디언트가 퍼지는 범위와 형태를 자유롭게 조절할 수 있습니다.