CSS로 페이딩 효과 구현하기
CSS에서 요소가 서서히 나타나거나 사라지는 듯한 페이딩(fading) 효과를 만들려면 linear-gradient 함수와 rgba() 색상 값을 함께 사용하는 것이 가장 간단하고 효과적인 방법입니다.
기본 원리
linear-gradient의 시작 색상을 완전히 투명한 상태(알파 값 0)로 지정하고, 끝 색상을 불투명한 상태(알파 값 1)로 지정하면 두 색상 사이가 자연스럽게 이어지면서 페이딩 효과가 완성됩니다.
예제 코드
아래 예제를 실행하면 빨간색 계열의 배경이 왼쪽에서 오른쪽으로 갈수록 서서히 진해지는 페이딩 효과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1));
}
</style>
</head>
<body>
<h2>Linear Gradient</h2>
<div id="demo">Fading Effect</div><br>
</body>
</html>그라데이션 방향 바꾸기
to right 대신 다른 방향 키워드를 사용하면 페이딩이 흐르는 방향을 자유롭게 조절할 수 있습니다.
to left– 오른쪽에서 왼쪽으로 페이딩to bottom– 위에서 아래로 페이딩to top– 아래에서 위로 페이딩
또한 알파 값을 중간 단계로 조정하면(예: 0.5) 반투명한 부드러운 전환 효과도 쉽게 연출할 수 있습니다.