[HTML, CSS] 배경화면 한쪽만 흐리게 만들기 linear-gradient

HTML CSS

---

배경화면 한쪽 흐리게 만들기

CSS의 linear-gradient 속성을 활용해서 배경의 한쪽은 밝고 반대쪽으로 갈수록 어두워지는 효과를 구현해 보겠습니다. 배경은 body에 적용해 보겠습니다.

 

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
      to right,
      rgba(20, 20, 20, 0) 10%,
      rgba(20, 20, 20, 0.25) 25%,
      rgba(20, 20, 20, 0.5) 50%,
      rgba(20, 20, 20, 0.75) 75%,
      rgba(20, 20, 20, 1) 100%
    ),
    url(https://source.unsplash.com/random);
  background-size: cover;
}

 

실행결과

 

이미지 url은 unsplash에서 제공하는 랜덤 이미지를 사용하였습니다.

 

각 속성의 의미는 다음과 같습니다.

rgba(20, 20, 20, 0) 10%	왼쪽 끝부터 화면의 10%까지는 검정색 투명도 0
rgba(20, 20, 20, 0.25) 25%	10%부터 25%까지는 검정색 투명도 0.25
rgba(20, 20, 20, 0.5) 50%	25%부터 50%까지는 검정색 투명도 0.5
rgba(20, 20, 20, 0.75) 75%	50%부터 75%까지는 검정색 투명도 0.75
rgba(20, 20, 20, 1) 100%	75%부터 오른쪽 끝까지는 검정색 투명도 1

*투명도가 작을수록 흐릿하며, 0일 때는 안보입니다.

 

background 속성을 보면 linear-gradient와 이미지를 동시에 설정하였습니다. 이렇게 하면 두 가지 종류의 배경을 겹쳐서 나타낼 수 있습니다.
 
주의할 점은 먼저 쓴 배경이 화면 바깥쪽(z 축 기준으로 사용자 쪽)에 적용되므로 이미지를 먼저 쓰고 linear-gradient를 쓰면 이미지에 의해 linear-gradient가 가려지므로 적용 순서에 주의하셔야 합니다.