선형 그라디언트(Linear Gradient)란?
선형 그라디언트는 두 가지 이상의 색상을 위에서 아래로, 왼쪽에서 오른쪽으로 하는 등 하나의 직선 방향을 따라 자연스럽게 배치하는 CSS3 기법입니다. 색상이 서로 전환되는 지점을 '색상 정지점(color stop)'이라고 부르며, 정지점의 위치와 개수를 조절해 원하는 분위기의 그라디언트를 자유롭게 연출할 수 있습니다.
그라디언트에 투명도를 추가하려면 일반 RGB 대신 RGBA() 함수를 사용해 색상 정지점을 정의하면 됩니다. RGBA는 빨강(R), 초록(G), 파랑(B) 값에 알파(Alpha) 채널을 추가한 형식으로, 마지막 값이 0에 가까울수록 투명해지고 1에 가까울수록 불투명해집니다.
CSS3 투명 선형 그라디언트 예제 코드
다음은 CSS3를 사용해 투명도가 적용된 선형 그라디언트를 설정하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>투명도가 적용된 선형 그라디언트</h1>
<div class="linearGradient"></div>
<h2>위 선형 그라디언트는 흰색에서 진한 남보라색으로 자연스럽게 전환됩니다</h2>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제에서는 to left 방향으로 그라디언트를 설정했으며, 완전히 불투명한 보라색(rgb(111, 0, 255))에서 시작해 알파 값을 단계적으로 낮춰 마지막에는 완전히 투명한 상태(rgba(111, 0, 255, 0))까지 이어집니다. 그 결과 배경의 흰색이 비치면서 흰색에서 진한 남보라색으로 부드럽게 전환되는 시각적 효과를 얻을 수 있습니다.