CSS의 linear-gradient() 함수를 사용하면 선형 그라디언트에 원하는 각도를 자유롭게 지정할 수 있습니다. 각도는 deg 단위로 표현하며, 값에 따라 색상이 흐르는 방향이 달라집니다.
각도별 그라디언트 방향
- 0deg: 아래에서 위로 색상이 변합니다.
- 90deg: 왼쪽에서 오른쪽으로 색상이 변합니다.
- -90deg: 오른쪽에서 왼쪽으로 색상이 변합니다.
아래 예제 코드를 실행하면 0도, 90도, -90도 각각의 각도가 선형 그라디언트에 어떻게 적용되는지 직접 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
height: 100px;
background: linear-gradient(0deg, orange, blue);
}
#demo2 {
height: 100px;
background: linear-gradient(90deg, orange, blue);
}
#demo3 {
height: 100px;
background: linear-gradient(-90deg, orange, blue);
}
</style>
</head>
<body>
<h2>선형 그라디언트</h2>
<div id = "demo1">0도</div><br>
<div id = "demo2">90도</div><br>
<div id = "demo3">-90도</div>
</body>
</html>이처럼 각도 값을 조절하기만 하면 그라디언트의 진행 방향을 손쉽게 변경할 수 있으며, 배너나 버튼 등 다양한 UI 요소의 배경 디자인에 유용하게 활용할 수 있습니다.