[CSS] linear-gradient 로 background에 색상 입히기

linear-gradient 로 background에 색상 입히기

 

 

.div0{
     background: linear-gradient(red, blue);
}

 

 

※ 방향을 따로 설정하지 않으면 위의 그림처럼 to bottom이 default 입니다. 

 

.div0{
     background: linear-gradient(to right, red, blue);
}

 

 

to right top 오른쪽 대각선 위, to bottom right 오른쪽 대각선 아래로도 그라데이션으로 설정할 수 있습니다.

 

🟦 그라데이션 변경 시점 설정

 

각 색깔 뒤에 %, px 값을 설정하면 변경 시점부터 색깔이 변경되기 시작합니다.

이때 색깔이 완전 변경되는 것이 아니라 그라데이션으로 다른 색으로 전환이 됩니다.

 

.div0{
     background: linear-gradient(to right, red 20%, blue); // 20%까지 red, 나머지 blue
}

 

 

🟥 linear-gradient 응용

 

trasparent(투명) 처리로 아래의 그림과 같은 사각형을 만들 수도 있습니다.

 

.div0{
     background: linear-gradient(135deg, transparent 20px, blue 0);
}

 

 

 

---

출처: [HTML/CSS] linear-gradient와 그 응용

https://blog.naver.com/98shcho/222433610661