CSS Gradient Generator — 그라데이션 생성기

사용 방법

1. 간단 모드에서 2색과 방향을 선택하면 Linear Gradient 코드가 생성됩니다.
2. 고급 모드에서 Linear, Radial, Conic 타입과 각도, 최대 3색 그라데이션을 설정할 수 있습니다.
3. 생성된 그라데이션 코드를 복사하여 사용하세요.

언제 사용하나요

단색 배경이 밋밋해 보일 때, 색이 부드럽게 이어지는 면을 만들고 싶을 때 그라데이션을 사용합니다. 히어로 영역의 배경, 강조 버튼, 카드 표면, 섹션 구분선 등에 자주 쓰입니다. 색과 방향을 바꿔 미리보기로 확인하면서 분위기를 잡고, 완성된 CSS를 그대로 가져다 붙일 수 있습니다.

방향·색상 stop과 예시

Linear는 지정한 각도(또는 방향 프리셋)를 따라 색이 직선으로 이어지고, Radial은 중심에서 바깥으로 원형으로 퍼지며, Conic은 중심을 축으로 색이 회전합니다. 각 색은 그라데이션 위의 위치(color stop)에 놓이며, stop 간격을 좁히면 경계가 또렷해지고 넓히면 전환이 완만해집니다.

• 버튼: 비슷한 두 색으로 45° linear → 누르고 싶은 입체감
• 히어로 배경: 채도를 낮춘 두세 색을 넓게 펼친 linear
• 카드 표면: 같은 색의 밝기 차만 둔 은은한 radial
• 장식 그래픽: 여러 색을 돌린 conic으로 원형 강조

가독성 점검과 붙여넣을 때 확인할 점

그라데이션 위에 텍스트를 올리면 위치마다 배경 밝기가 달라져 어떤 구간에서는 글자가 묻힐 수 있습니다. 가장 불리한 지점을 기준으로 대비를 확인하는 것이 안전합니다.

• 너무 다른 두 색을 붙이면 중간에 탁한 색이 생기니 인접 색상끼리 조합
• 배경으로 쓸 때는 채도를 낮춰 본문 텍스트를 가리지 않게 조절
• 각도 단위(deg)와 방향 키워드(to right)를 섞어 쓰지 않도록 한 가지로 통일

생성된 코드를 붙여넣을 때는 적용 대상의 background 속성에 넣었는지, 구형 브라우저 대응이 필요하면 단색 background-color를 함께 두었는지 확인하세요. 그라데이션 위 텍스트는 실제 화면에서 명도 대비 검사로 함께 점검하면 좋습니다.

자주 묻는 질문

Linear Gradient, Radial, Conic의 차이는 무엇인가요?

Linear Gradient는 직선 방향, Radial은 중심에서 바깥으로 퍼지는 원형, Conic은 중심점을 기준으로 회전하는 원뿔형 그라데이션입니다.

간단 모드와 고급 모드의 차이는?

간단 모드는 2색 + 방향 프리셋으로 빠르게 생성합니다. 고급 모드는 타입 선택, 각도 세밀 조절, 3색 그라데이션을 지원합니다.

각도(deg)는 어떤 방향을 가리키나요?

0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 색이 진행합니다. 방향 프리셋의 'to right'가 90deg와 같은 의미입니다.

그라데이션 위 텍스트가 잘 안 보입니다

밝은 구간과 어두운 구간 모두에서 글자가 읽혀야 합니다. 텍스트 영역에 반투명 단색 레이어를 덧대거나, 색 범위를 좁혀 배경 밝기 차이를 줄이세요.

색 사이 경계를 더 또렷하게 만들 수 있나요?

두 색의 stop 위치를 같은 값으로 지정하면 부드러운 전환 없이 경계가 딱 떨어지는 띠 형태가 됩니다.