본문 바로가기

HTML, CSS

[CSS] 그라디언트: linear-gradient

linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));

그라데이션을 나타낼 수 있는 속성으로 보통 배경이미지에 많이 사용된다.

특정 각도를 입력하여 각도에 맞게 그라데이션이 나타나도록 할 수 있음.

 

 

 

내가 만든 웹사이트에서도 이 속성이 사용되었는데, 

 

.wrap{background: linear-gradient(to right bottom,#0f0f0f,#282828);}

 

오른쪽 아래 방향 ↘️ 으로 그라데이션이 가게끔 작성했음. 

 

다음처럼 그라데이션기능과 이미지를 같이 넣어 디자인 효과를 줄 수도 있다.

 

  background-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
    url("pizza.png");

 

 

그라데이션 관련 유용한 사이트

https://cssgradient.io/

'HTML, CSS' 카테고리의 다른 글

[CSS] 불투명도: opacity  (0) 2023.04.14
[CSS] 그림자: box-shadow  (0) 2023.04.14
[CSS] 배경이미지: background-image  (0) 2023.04.14
[CSS] 크기 단위  (0) 2023.04.14
[CSS] 색상 단위  (0) 2023.04.14