CSS 그라디언트 생성

사용 방법

1. 한 줄에 색 하나씩 적습니다. hex, rgb(), hsl(), 색 이름 — CSS에서 쓰는 표기면 다 됩니다.
2. 색 뒤에 위치를 적으면 그 지점에서 멈춥니다. “#000 80%”.
3. 선형·방사형·원뿔형과 각도 또는 중심을 고릅니다.
4. 선언을 복사합니다.

자주 묻는 질문

왜 단색이 먼저 나오나요?

폴백입니다. 그라디언트를 해석하지 못하는 쪽 — 오래된 브라우저, 메일 클라이언트, PDF 렌더러 — 은 첫 선언을 쓰고 다음 것을 무시합니다. 이게 없으면 그쪽에는 배경이 아예 없고, 보통 단색보다 나쁜 결과가 됩니다.

180deg는 어느 방향인가요?

아래입니다. CSS에서는 0deg가 위이고 시계 방향으로 커집니다. 예전 -webkit- 표기나 대부분의 디자인 도구와 반대라, 여기서 가장 많이 헷갈립니다.

끌어서 조절하는 화면이 아닌 이유는?

화면은 코드 리뷰에 붙여넣을 수 없기 때문입니다. 여기서 나오는 것은 선언이라 diff가 되고, 커밋할 수 있고, 다음에 파일을 여는 사람이 읽을 수 있습니다.

conic은 어디에 쓰나요?

중심을 돌며 도는 것들 — 원그래프, 색상환, 로딩 표시입니다. 셋 중 나머지 둘로 흉내내기 어려운 것이 이것입니다.

서버로 전송되나요?

아니요. 브라우저 안에서만 동작하므로 입력한 내용은 컴퓨터를 벗어나지 않습니다.