CSS 각도를 활용한 선형 그라디언트 방향 설정 방법

CSS에서 선형 그라디언트(linear-gradient)는 기본적으로 위에서 아래로 진행되지만, 각도(angle) 값을 직접 지정하면 그라디언트가 흐르는 방향을 훨씬 더 세밀하게 제어할 수 있습니다.

기본 문법

그라디언트의 방향을 각도로 설정하려면 아래와 같은 문법을 사용합니다.

background-image: linear-gradient(각도, 색상1, 색상2);

여기서 각도는 시계 방향으로 측정되며, 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 그라디언트가 진행됩니다. 음수 값도 사용할 수 있으며, 예를 들어 -90deg는 오른쪽에서 왼쪽 방향이 됩니다.

예제 코드

다음은 CSS에서 각도를 사용해 선형 그라디언트의 방향을 설정하는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    height: 200px;
    width: 300px;
    display: inline-block;
    margin-right: 10px;
}
.linearGradient {
    background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
    background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h1>각도를 이용한 선형 그라디언트 방향 설정</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>

실행 결과

위 코드를 실행하면 두 개의 div 요소에 서로 반대 방향의 그라디언트가 적용된 것을 확인할 수 있습니다.

linearGradient (90deg): 핑크색(rgb(255, 0, 200))에서 노란색(yellow)으로 왼쪽에서 오른쪽 방향으로 그라디언트가 흐릅니다.
linearGradient1 (-90deg): 같은 색상 조합이지만 오른쪽에서 왼쪽 방향으로 그라디언트가 흐릅니다.

이처럼 각도 값을 조절하면 대각선 방향(45deg, 135deg 등)을 포함해 원하는 어떤 방향으로도 그라디언트를 자유롭게 만들 수 있습니다.