그라데이션 색 위치와 각도 확인하기

사용할 도구

• 도구 열기: CSS 그라디언트 생성

90도와 180도로 방향 기준 확인

background: linear-gradient(90deg, #4F46E5 0%, #22D3EE 100%);

#4F46E5·#22D3EE·90도면 첫 색이 왼쪽, 둘째가 오른쪽입니다. 180도는 위에서 아래입니다. CSS는 0도가 위이고 시계 방향으로 증가하므로 가로 0도인 수학 좌표와 다릅니다. 단순한 방향부터 확인하세요.

방향을 조사할 때 각도와 색 순서를 동시에 바꾸지 마세요. 하나씩 바꾸고 CSS의 각도인지 색 순서인지 확인하면 효과와 되돌리는 방법을 이해할 수 있습니다.

0%와 100%는 불투명도가 아닌 위치

색 뒤 백분율은 그라디언트 선의 위치입니다. 0%가 투명, 100%가 불투명은 아닙니다. 투명도는 색 alpha입니다. 색 영역을 늘리는 일과 색조·투명도 변경을 구별하세요.

background: linear-gradient(90deg, #4F46E5 30%, #22D3EE 70%);

복사한 CSS를 적용처에서 수정하는 예입니다. 30% 전은 첫 색, 30~70%는 전환, 이후는 둘째 색입니다. 현재 두 색 화면에는 위치 전용 입력이 없으므로 선언 전체를 색 입력에 붙이지 마세요.

같은 위치의 두 색은 선명한 경계를 만듭니다

background: linear-gradient(90deg, #4F46E5 50%, #22D3EE 50%);

두 중단점을 50%에 두면 전환 구간이 없어져 바로 바뀝니다. 그라디언트가 꼭 흐린 띠는 아닙니다. 분할을 원하는데 중간색이 넓으면 적용 CSS의 위치를 확인하세요.

미리보기와 실제 배너의 종횡비 비교

같은 각도·중단점도 정사각형과 긴 배너에서 다르게 보입니다. 백분율은 화면 가로 위치가 아닌 그라디언트 선의 위치입니다. 실제 폭·높이·모서리·여백에서 복사한 CSS를 확인하세요.

글자를 올리면 실제 글자 아래 가장 읽기 어려운 배경을 보세요. 대비 도구는 지정한 색 쌍만 계산하며 그라디언트 전체나 글자 위치를 자동 탐색하지 않습니다. 적용 화면에서 위치별로 확인하세요.

색·방향·위치를 하나씩 정하기

0%·100% 두 색으로 방향부터 정하고 색, 필요하면 적용 CSS의 중단점을 조정하세요. 한 가지씩 바꾸면 인과가 분명합니다. 빈 색 견본뿐 아니라 크고 작은 화면과 실제 글자로 마무리 확인하세요.

도구는 배경 URL을 가져오거나 다른 사이트 CSS를 읽지 않습니다. 입력 색으로 선언을 만드는 범위입니다. 다중 배경·애니메이션·보간 색 공간은 별도 CSS 작업이며 선언 하나가 배경 설계 전체는 아닙니다.

참고 자료

• MDN — linear-gradient() (새 탭에서 열립니다)

사용할 도구

• CSS 그라디언트 생성