그라데이션 생성기

핵심 개념

그라데이션 생성기는 히어로 배경, 버튼, 보더 대용 면에 쓰는 linear-gradient를 각도·정지점 색으로 조율할 때 씁니다. 각 정지점은 색과 0~100% 위치를 가집니다. 실시간으로 미리보기와 CSS가 같이 바뀝니다. radial이나 conic은 이 버전에 없습니다.

색은 두 개 이상이어야 하며 제거 버튼으로 2개 미만이 되지는 않게 막는 편입니다. 생성은 브라우저에서만 이뤄집니다. 투명도가 있는 그라데이션은 이 색 입력이 불투명 헥스라서 알파는 직접 CSS를 고치는 쪽이 낫습니다. 각도를 0으로 두면 아래에서 위로 향하는 선형이 됩니다.

예시

기본 파랑에서 청록, 135도이면 오른쪽 아래 방향으로 이어지는 띠가 나옵니다. 가운데 정지점을 50%에 흰 색으로 추가하면 세 색 하이라이트가 됩니다. 복사한 값을 background: 뒤에 붙이면 바로 쓸 수 있습니다. 히어로 섹션은 각도를 135도 근처로 두면 사진 위 오버레이와 잘 어울리는 경우가 많습니다. 정지점을 세 개 이상 쓰면 브랜드 두 색 사이에 중간 하이라이트를 넣을 수 있습니다. 버튼에 쓸 때는 각도를 180도로 두어 위가 살짝 밝게 보이도록 하는 패턴이 많습니다. 같은 입력을 여러 번 시험할 때는 초기화 후 새로 붙여 이전 출력과 섞이지 않게 합니다. 공용 컴퓨터라면 작업이 끝난 뒤 입력란을 비워 원문이 모니터에 남지 않게 하세요. 브라우저 탭을 닫으면 방금 붙인 값도 함께 사라지며 서버에 삭제 요청을 보낼 필요는 없습니다. 버튼 이름과 칸 제목은 화면 위쪽 도구와 같으므로 글을 읽으며 그대로 따라가면 됩니다. 결과가 비어 있으면 필수 칸을 채웠는지, 오류 메시지가 숨겨져 있지 않은지 먼저 봅니다.