[CSS] 그라데이션(그라디언트) 줄 있는 것 처럼 보이는 문제 해결

Basic_Studies/CSS

[CSS] 그라데이션(그라디언트) 줄 있는 것 처럼 보이는 문제 해결

adore_voy 2022. 7. 14. 16:47

이런 문제 있는 분들 많을 것 같은데 생각보다 검색 결과가 없어서 찾기 힘들었다.

결국 직접 스택오버플로우에 물어봤고, 답변을 공유하고자 한다.

그라디언트를 당연히 마지막은 투명도를 0으로 줘서 자연스럽게 배경에 흡수되는 그라디언트를 만들려고 했는데 이상하게 줄이 생긴 것 같은 착시 효과를 주더라.

보통 짜는 코드처럼 단순하게 그라디언트를 설정하면 아래와 같이 보여진다.

div.gradient_wrap {
	margin: 100px;
	width: 300px;
	height: 300px;
	background: linear-gradient(0deg, rgba(38,38,38,1) 0%, rgba(255,255,255,0) 100%);
}

이 느낌을 없애주기 위해서는 아주 섬세한 그라디언트 컨트롤이 필요하다.

아래와 같이 설정하자.

div.gradient_wrap {
	margin: 100px;
	width: 300px;
	height: 300px;
	background: linear-gradient(0deg,
  		hsl(0, 0%, 0%) 0%,
  		hsla(0, 0%, 0%, 0.738) 19%,
  		hsla(0, 0%, 0%, 0.541) 34%,
  		hsla(0, 0%, 0%, 0.382) 47%,
  		hsla(0, 0%, 0%, 0.278) 56.5%,
  		hsla(0, 0%, 0%, 0.194) 65%,
  		hsla(0, 0%, 0%, 0.126) 73%,
  		hsla(0, 0%, 0%, 0.075) 80.2%,
  		hsla(0, 0%, 0%, 0.042) 86.1%,
  		hsla(0, 0%, 0%, 0.021) 91%,
  		hsla(0, 0%, 0%, 0.008) 95.2%,
  		hsla(0, 0%, 0%, 0.002) 98.2%,
  		hsla(0, 0%, 0%, 0) 100%
	);
}