선형·방사형 그라데이션을 이미지처럼 사용합니다.
linear-gradient는 방향을 따라, radial-gradient는 중심에서 바깥으로 색을 보간합니다. 배경 이미지이므로 background-color fallback과 함께 사용할 수 있습니다.
이번 예제의 출발점은 linear-gradient(135deg, color1, color2)입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 색상 중지점 45%와 75%를 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
색상 대비가 급격한 그라데이션 위에 긴 본문을 놓으면 읽기 어렵습니다.
직접 바꿔보세요색상 중지점 45%와 75%를 바꿔보세요.