Utilore

CSS 그라데이션 생성기

슬라이더를 끌면 위 패널이 함께 바뀝니다. 마음에 들면 한 줄을 복사해 스타일시트에 붙여넣으면 끝입니다.

각도는 선형과 원뿔형에 적용되며, 원형은 중심에서 퍼집니다.

색상 정지점

    사용 방법

    1. 종류를 고릅니다. 선형은 직선을 따라, 원형은 중심에서, 원뿔형은 중심을 돌며 퍼집니다.
    2. 각도를 정하고 색이 만나야 할 지점으로 정지점을 옮깁니다.
    3. 두 색으로 부족하면 정지점을 추가하거나 「무작위로」를 누릅니다.
    4. 미리보기 아래의 CSS 한 줄을 복사합니다.

    알아두면 좋은 점

    미리보기가 체크무늬 위에 있는 이유

    그라데이션은 흔히 투명한 색으로 끝나는데, 흰 패널 위에서는 불투명한 색과 똑같아 보입니다. 체크무늬는 색이 옅은 곳마다 비쳐 나오므로 설정한 대로가 보이는 대로가 됩니다. 이미지 편집기가 이 습관을 가진 이유도 바로 이것입니다.

    코드를 만들기 전에 정지점을 정렬합니다

    CSS는 정지점을 대신 정렬해 주지 않습니다. 30% 앞에 70%를 적으면 브라우저가 뒤의 값을 붙잡아, 그라데이션이 조용히 색 하나를 잃습니다. 이 도구는 줄을 만들 때 위치 순으로 정렬하므로, 슬라이더를 이웃보다 앞으로 끌어도 결과가 깨지지 않습니다.

    자주 묻는 질문

    세 종류는 어떻게 다른가요?

    선형은 직선을 따라가며 각도를 받습니다. 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다. 원형은 중심에서 동심원으로 퍼져 광채나 스포트라이트에 어울립니다. 원뿔형은 시곗바늘처럼 한 점을 돌며, 원그래프와 색상환이 이것으로 만들어집니다.

    투명이 들어간 그라데이션은 어떻게 만드나요?

    브라우저 선택기가 알파를 지원하면 불투명도를 낮추면 됩니다. 아니면 복사한 줄을 직접 고치세요. rgba(31, 95, 214, 0)도 단색과 똑같이 정지점이 됩니다. 흰색으로 사라지는 것보다 투명으로 사라지는 편이 어떤 배경에서도 통해 더 쓸모 있습니다.

    글자 색으로 쓸 수 있나요?

    네, 두 줄만 더하면 됩니다. 그라데이션을 background-image에 두고 background-clip: text와 color: transparent를 함께 씁니다. 글자는 모양을 지키고 그라데이션이 글자 사이로 비칩니다.

    같은 각도인데 원형에서는 왜 달라 보이나요?

    원형에서는 각도가 아예 적용되지 않습니다. 원형 그라데이션은 중심에서 시작해 방향이 없으므로, 각도는 선형과 원뿔형의 몫이며 거기서 시작 지점을 정합니다.

    관련 도구