CSS 그라디언트 생성기

작동 방식

CSS에서 그라디언트는 하나의 선언으로 쓰며, 특히 각도 규칙과 색상 정지점의 위치처럼 문법을 잘못 기억하기 쉽습니다. 조정하면서 바로 결과를 보는 것이 페이지를 새로 고쳐 확인하는 것보다 빠릅니다.

각도 규칙은 사람들이 자주 헷갈립니다

CSS에서 0도는 위쪽을 가리키고 각도는 시계 방향으로 커지므로, 90도는 왼쪽에서 오른쪽으로, 180도는 위에서 아래로 향합니다. 수학의 규칙이나 일부 디자인 도구와 다르기 때문에, 다른 곳에서 복사한 그라디언트가 회전된 채로 나오는 일이 흔합니다.

세 가지 종류

linear는 직선을 따라 진행하며 거의 모든 실제 용도를 다룹니다. radial은 한 점에서 바깥으로 퍼지며 빛무리와 스포트라이트에 어울립니다. conic은 중심을 따라 돌아가며, 원그래프와 색상환이 이것으로 만들어집니다.

그라디언트는 색상이 아니라 이미지입니다

또 하나 자주 걸리는 부분입니다. CSS는 그라디언트를 배경 이미지로 취급하므로 background와 background-image에서는 작동하지만, color, border-color처럼 단색을 기대하는 속성에서는 작동하지 않습니다. 텍스트 그라디언트에는 별도 기법인 background-clip이 필요합니다.

중간 색 추가하기

정지점이 두 개이면 깔끔하게 섞입니다. 세 번째를 더하면 다른 색상을 거쳐 전환할 수 있어, 반대되는 두 색을 곧바로 섞을 때 생기는 탁한 회색을 피할 수 있습니다.