CSS 그라데이션 생성기

CSS 그라데이션 만드는 방법

1. 종류를 고르세요. 선형은 정한 각도로 곧게, 원형은 가운데에서 원 모양으로 퍼지고, 원뿔형은 정한 각도에서 시작해 가운데를 돕니다.
2. 각 색을 바꾸고 슬라이더로 0%~100% 사이 위치를 정하세요. 색 추가는 가장 넓은 빈틈에 새 색을 넣으며 최대 여섯 개까지, ✕ 는 하나를 지웁니다.
3. 또는 프리셋을 눌러 거기서 시작하세요. 미리 보기가 바로 바뀌고, CSS 복사로 스타일시트에 붙일 줄을 복사합니다.

자주 묻는 질문

background 줄이 왜 두 개인가요?

첫 줄은 그라데이션을 못 그리는 드문 브라우저를 위한 단색이고, 나머지 브라우저에서는 둘째 줄이 그것을 덮어씁니다.

각도는 무슨 뜻인가요?

선형에서 0deg 는 아래에서 위로, 90deg 는 왼쪽에서 오른쪽으로, 180deg 는 위에서 아래로 갑니다. 원뿔형에서는 첫 색이 시작하는 곳이며, 위에서부터 시계 방향으로 셉니다.

글자나 테두리에도 쓸 수 있나요?

네. 글자에는 배경으로 넣고 background-clip: text 와 color: transparent 를 더하세요. 테두리에는 border-image 에 border-image-slice: 1 과 함께 쓰면 됩니다.