CSS 그라데이션이란?
CSS 그라데이션은 두 가지 이상의 색상 간에 부드러운 전환을 만들 수 있게 해줍니다. 이미지 파일 없이도 배경, 버튼, 장식 요소에 흔히 사용됩니다.
그라데이션 유형
- 선형 그라데이션: 지정된 각도의 직선을 따라 색상이 전환됩니다. CSS에서
linear-gradient()를 사용합니다. - 방사형 그라데이션: 중심점에서 원형 또는 타원형으로 색상이 방사됩니다. CSS에서
radial-gradient()를 사용합니다.
사용 팁
- 생성된 CSS를 원하는 요소의
background속성에 적용합니다. - 구형 브라우저를 위한 폴백으로 background-color와 함께 사용할 수 있습니다.
background-size와background-repeat를 결합하면 패턴 효과를 만들 수 있습니다.
자주 묻는 질문
CSS 그라데이션은 모든 브라우저에서 지원되나요?
네. CSS 그라데이션은 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. 벤더 프리픽스가 필요하지 않습니다.
두 가지 이상의 색상을 사용할 수 있나요?
네, CSS는 다중 색상 중간점을 지원합니다. 이 도구는 간편함을 위해 2색 그라데이션을 생성하지만, CSS를 수정하여 더 많은 색상 중간점을 추가할 수 있습니다.