CSS에서 방사형 그라디언트의 모양(shape)을 설정하려면 radial-gradient() 함수를 사용합니다. 이 함수는 요소의 배경 이미지로 방사형 그라디언트를 지정하며, 첫 번째 매개변수에 원하는 모양을 지정할 수 있습니다.
방사형 그라디언트에 사용할 수 있는 기본 모양은 다음 두 가지입니다.
- ellipse (기본값): 타원 형태의 그라디언트
- circle: 정원 형태의 그라디언트
아래와 같이 함수의 첫 번째 인자로 모양을 지정하면 됩니다.
background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
예제 코드
다음은 CSS를 사용해 방사형 그라디언트의 모양을 설정하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 300px;
background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
}
</style>
</head>
<body>
<h1>Radial Gradient Shape Example</h1>
<div id="radial"></div>
</body>
</html>실행 결과
위 코드를 실행하면 노란색, 빨간색, 하늘색이 중심에서 바깥쪽으로 부드럽게 퍼지는 타원형(ellipse) 방사형 그라디언트가 적용된 div 요소가 화면에 출력됩니다.
만약 원형(circle) 그라디언트를 원한다면, 첫 번째 매개변수를 circle로 변경하기만 하면 됩니다.
background-image: radial-gradient(circle, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
이처럼 radial-gradient() 함수의 첫 번째 매개변수만 조절하면 그라디언트의 모양을 손쉽게 변경할 수 있으며, 색상은 쉼표로 구분하여 여러 개를 순서대로 지정할 수 있습니다.