CSS 그라디언트란?
드래그 가능한 색상 스톱으로 선형, 방사형, 원뿔형 그라디언트를 만들고 블렌드 모드 및 바로 쓸 수 있는 CSS를 출력합니다.
CSS 그라디언트는 색상 간의 부드러운 전환으로 브라우저가 생성하는 이미지입니다. 렌더링 시 계산되므로 어떤 크기에서도 깨지지 않으며 이미지 파일이 필요하지 않습니다.
세 가지 유형이 있습니다: 선형(방향/각도), 방사형(중심에서 퍼지는 원/타원), 원뿔형(중심을 기준으로 회전). 각 그라디언트는 컬러 스톱으로 정의되며, 스톱마다 위치와 알파를 지정해 색상 혼합을 제어할 수 있습니다.
background-image 에서 쉼표로 구분해 여러 그라디언트를 겹칠 수 있고, background-blend-mode 로 섞어 더 풍부한 질감을 만들 수 있습니다. CSS 는 oklch 같은 보간 색 공간도 지원해 시각적으로 더 부드러운 전환을 제공합니다.
- 선형 그라디언트는 조명과 방향성 있는 깊이에 좋습니다.
- 방사형과 원뿔형 그라디언트는 스포트라이트, 링, 색상 휠에 유용합니다.
- 스톱 위치를 조정하면 전환을 더 선명하게 또는 부드럽게 만들 수 있습니다.