CSS 그라데이션 생성기

그라데이션 함수는 어떻게 동작하나요?

CSS 그라데이션은 이미지 파일이 아니라 브라우저가 화면을 그릴 때 계산해서 만들어내는 "생성된 이미지"입니다. 그래서 background 또는 background-image에 넣을 수 있고, 해상도와 상관없이 선명하며 파일 요청이 따로 생기지 않습니다. 가장 많이 쓰는 형태는 세 가지입니다.

• linear-gradient: 한 방향 직선을 따라 색이 변합니다. 버튼, 배너, 섹션 배경에 가장 흔합니다.
• radial-gradient: 한 점에서 바깥으로 퍼지는 원형·타원형 변화입니다. 조명 효과, 은은한 비네팅에 어울립니다.
• conic-gradient: 중심점을 기준으로 각도를 따라 한 바퀴 도는 변화입니다. 원형 차트, 색상환, 금속 질감 표현에 쓰입니다.

기본 문법은 linear-gradient(각도, 색상1, 색상2)입니다. 색상 뒤에 40%처럼 위치를 붙이면 그 지점에서 해당 색이 100% 나타나도록 지정할 수 있고, 위치를 생략하면 색이 균등하게 배치됩니다. 두 색의 위치를 같게 하면 경계가 부드럽지 않고 칼로 자른 듯한 줄무늬가 만들어집니다.

각도와 방향 키워드 대응표

각도는 시계 방향으로 증가하며 0도가 "위쪽 방향", 90도가 "오른쪽 방향"입니다. 즉 90deg는 첫 색이 왼쪽, 마지막 색이 오른쪽에 놓입니다. 각도를 생략하면 기본값은 to bottom(180도)입니다.

참고로 to top right 같은 모서리 키워드는 요소의 가로세로 비율에 맞춰 각도가 자동으로 달라지므로, 직사각형에서는 45도와 정확히 같지 않습니다. 모든 크기에서 똑같은 기울기를 원하면 숫자 각도를 쓰세요.

색을 고를 때 알아둘 점

기본적으로 브라우저는 두 색 사이를 RGB 값 기준으로 직선 보간합니다. 보색에 가까운 두 색(예: 파랑과 주황)을 섞으면 가운데가 탁한 회색빛으로 가라앉는 경우가 많습니다. 이럴 때는 가운데에 중간 색상을 하나 더 넣거나, 색상환에서 가까운 색을 고르면 맑은 그라데이션이 됩니다. 이 생성기의 "세 번째 색상 사용"이 그 용도입니다. 최신 브라우저에서는 linear-gradient(in oklch, ...)처럼 보간 색 공간을 지정하는 문법도 쓸 수 있지만, 지원 범위가 계속 바뀌고 있으므로 실제 적용 전에 대상 브라우저 지원 여부를 확인하는 것이 안전합니다.

조합이 막막하다면 색상 팔레트 생성기에서 어울리는 색을 먼저 뽑고, HEX 값이 필요하면 색상 코드 변환기로 RGB·HSL과 오가며 확인하세요.

검산된 예시: 금색에서 남색으로

이 페이지의 기본값인 #c9a961(금색)와 #1a1a2e(짙은 남색)를 섞으면, RGB 평균으로 계산한 정확한 중간색은#726248입니다. 세 색 위에 글자를 얹었을 때 WCAG 상대 휘도 공식으로 계산한 대비 비율은 아래와 같습니다.

표에서 보듯이 금색 쪽은 검정 글자가, 남색 쪽은 흰 글자가 잘 읽힙니다. 문제는 그 사이입니다. 그라데이션은 한 요소 안에서 배경 밝기가 계속 바뀌므로, 글자가 놓이는 위치의 배경이 어떤 밝기인지에 따라 읽기 쉬움이 달라집니다. 글자를 그라데이션 위에 얹는다면 가장 불리한 지점(대개 중간)의 대비 비율을 기준으로 판단해야 합니다. 위 도구의 "가독성" 영역은 각 색 위에서의 비율을 바로 보여주며, 더 정밀한 검사는명도 대비 검사기에서 할 수 있습니다.

용도별 설계 요령

같은 두 색이라도 어디에 쓰느냐에 따라 좋은 각도와 종류가 다릅니다. 아래는 실무에서 자주 쓰는 기준입니다.

• 버튼: 위에서 아래(180도)로 밝은 색에서 약간 어두운 색으로 가면 입체감이 생깁니다. 두 색의 밝기 차이는 작게 두세요. 차이가 크면 버튼 안의 글자 한쪽만 읽기 어려워집니다.
• 히어로 배너: 대각선(135도 안팎)이 화면 가로세로 비율이 달라져도 자연스럽게 보입니다. 배너 위 제목은 가장 어두운(또는 밝은) 쪽에 정렬해 대비를 확보하세요.
• 카드·섹션 구분: 같은 색상 계열의 명도만 살짝 바꾸는 2색이 가장 안정적입니다. 눈에 띄는 대비색은 포인트 한 곳에만 쓰는 편이 좋습니다.
• 스포트라이트·비네팅: radial을 쓰고 가운데를 밝게, 가장자리를 어둡게 두면 시선이 중앙으로 모입니다.
• 원형 차트·색상환: conic에서 색 위치를 퍼센트로 직접 지정하면 도넛 차트의 구간을 표현할 수 있습니다. 시작 각도는 from 90deg처럼 지정합니다.

코드 읽는 법

도구가 만든 background: linear-gradient(90deg, #c9a961, #8a6d3b, #1a1a2e);는 "왼쪽에서 오른쪽으로 가며 금색, 갈색빛 금색, 남색 순서로 색이 바뀐다"고 읽습니다. 색이 세 개이면 각각 0%, 50%, 100% 지점에 놓입니다. 이를 #c9a961 0%, #8a6d3b 30%, #1a1a2e 100%처럼 바꾸면 가운데 색이 왼쪽으로 치우쳐서 밝은 구간이 짧아지고 어두운 구간이 길어집니다. 도구의 출력 맨 위에 붙는background: #c9a961; 한 줄은 그라데이션을 해석하지 못하는 환경에서 보이는 대체 색이며, 뒤의 줄이 유효하면 그 값으로 덮어써집니다.

흔한 실수와 해결법

• 글자가 안 보임: 그라데이션 전체에 같은 글자색을 쓰면 한쪽 끝에서 대비가 무너집니다. 글자 영역에만 반투명 어두운 오버레이를 깔거나, 글자가 놓일 부분의 색을 한쪽으로 몰아주세요.
• 띠가 보임(밴딩): 비슷한 두 색을 아주 넓은 면적에 칠하면 계단 모양 띠가 보일 수 있습니다. 색 차이를 조금 키우거나 아주 약한 노이즈 텍스처를 겹치면 완화됩니다.
• 모바일에서 배경이 끊김: 긴 페이지에 background-attachment: fixed를 쓰면 일부 모바일 브라우저에서 무시되거나 성능이 떨어질 수 있습니다. 필요하면 고정 배경 대신 별도의 고정 레이어를 사용하세요.
• 이미지와 겹침 순서: background 단축 속성에 여러 값을 쉼표로 나열하면 먼저 쓴 것이 위에 쌓입니다. 사진 위에 그라데이션을 덮으려면 그라데이션을 먼저 쓰세요.
• 단색 대체 누락: 오래된 환경을 고려한다면 그라데이션 앞 줄에 단색 background를 하나 두어 대체 색을 확보하세요. 이 도구가 생성하는 코드에도 시작 색 기준 대체 줄이 포함됩니다.

결과를 어떻게 활용하나요?

복사한 코드는 CSS의 background(또는 background-image) 속성 값으로 그대로 붙여 넣으면 됩니다. 여러 곳에서 같은 그라데이션을 쓴다면 CSS 변수(--brand-gradient)에 한 번만 정의해 재사용하는 편이 유지보수에 좋습니다. 글자 자체에 그라데이션을 입히는 효과는 background-clip: text와 투명 글자색 조합이 필요한 별도 기법이므로, 이 도구의 코드를 배경으로 먼저 만든 뒤 해당 속성을 추가해 응용할 수 있습니다. 그 경우에도 가장 밝은 부분과 어두운 부분 모두 페이지 배경과 충분한 대비가 나는지 확인하세요.

이 도구의 한계

이 생성기는 색 2~3개를 균등 간격으로 배치하며, 색 위치(%)·반복 그라데이션·원의 중심 위치와 크기 같은 세부 옵션은 제공하지 않습니다. 필요하다면 생성된 코드에 직접 40% 같은 위치 값이나 at top left 같은 중심 지정을 덧붙여 수정하세요. 색상 입력 칸은 브라우저 기본 색상 선택기를 쓰므로 투명도(알파)는 지정할 수 없습니다.

자주 묻는 질문