선형 그라데이션 효과 - linear-gradient

선형 그러데이션이란 색상이수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다. 이것을 만들어 주느 함수는 linear-dradient인데 색상이 어느 방향으로 바뀌고 어떤 색상으로 바뀌는지 알려 주어야 합니다. 선형 그러데이션 구문에서 사용하는 옵션을 하나씩 살펴보겠습니다.

linear-gradient

linear-gradient는 선형 그라데이션 효과를 만듭니다.

 

기본형

background : linear-gradient( direction, color1, color2, ..., color3 );

direction에는 그라데이션 방향을 입력합니다.

• to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
• to top : 아래에서 위로 그라데이션을 만듭니다.
• to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
• to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
• deg : 각도의 방향으로 그라데이션을 만듭니다.

 

예제

예제 1

• 색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다.
• 아래 예제는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.

<div class="lbGrad">to right</div>

div {
  width: 100%;
  height: 100px;
}
.lbGrad {
  background: linear-gradient( to right, yellow, red );
}

 

예제 2

• 방향에 따라 그라데이션이 어떻게 만들어지는지 비교하는 예제입니다.

<div class="lbGrad01">to bottom</div>
<div class="lbGrad02">to top</div>
<div class="lbGrad03">to right</div>
<div class="lbGrad04">to left</div>
<div class="lbGrad05">45deg</div>

div {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}
.lbGrad01 {
  background: linear-gradient( to bottom, yellow, orange );
}
.lbGrad02 {
  background: linear-gradient( to top, yellow, orange );
}
.lbGrad03 {
  background: linear-gradient( to right, yellow, red );
}
.lbGrad04 {
  background: linear-gradient( to left, yellow, red );
}
.lbGrad05 {
  background: linear-gradient( 45deg, white , orange );
}

 

예제 3

• 시작 색상과 끝 색상 사이에 색상 중지 점(color-stop)을 지정할 수도 있습니다.

<div class="lbGrad01">to bottom, white 60%</div>
<div class="lbGrad02">to right, white 60%</div>
<div class="lbGrad03">45deg, white 60%</div>

div {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  color: #fff;
}
.lbGrad01 {
  background: linear-gradient( to bottom, blue, white 60%, blue );
}
.lbGrad02 {
  background: linear-gradient( to right, blue, white 60%, blue );
}
.lbGrad03 {
  background: linear-gradient( 45deg, blue, white 60%, blue );
}