CSS 그라데이션

두 색과 각도로 CSS 그라데이션을 만듭니다. 미리보기를 보며 조절하면 linear-gradient() 코드가 복사할 수 있게 나옵니다.

사용 방법

1. 두 색을 고릅니다. 바탕색 먼저, 포인트색 나중이 무난한 습관입니다.
2. 각도를 정합니다: 180°는 위→아래, 90°는 왼쪽→오른쪽.
3. 미리보기에서 섞임이 마음에 들 때까지 조절합니다.
4. 생성된 CSS 를 스타일시트에 복사합니다.

이럴 때 씁니다

• 이미지 없이 히어로 영역·카드 헤더에 깊이를 줄 때.
• 단색보다 풍부해 보이는 버튼·배지 배경을 만들 때.
• 디자인 시안의 그라데이션을 실제 CSS 로 재현할 때.
• 내용을 방해하지 않는 은은한 페이지 배경을 깔 때.

그라데이션이 탁해지는 이유

그라데이션은 두 끝점을 RGB 공간에서 보간하는데, 색상환에서 멀리 떨어진 선명한 두 색은 중간이 회색 근처를 지나기 쉽습니다 — 빨강에서 청록으로 가는 길은 진흙탕을 통과합니다. 이웃한 색상끼리, 또는 한 색상의 밝기 두 단계 사이는 깨끗하게 섞입니다. CSS 그라데이션은 어떤 크기로도 공짜로 렌더링됩니다 — 이미지 다운로드도 확대 열화도 없습니다. 각도는 나침반 방식으로 0°가 위, 시계 방향으로 커집니다. 그라데이션 위 글자는 평균이 아니라 가장 불리한 지점 기준으로 대비를 확인하세요.

관련 도구

자주 묻는 질문

CSS 그라데이션는 어떤 색상 형식을 지원하나요?

HEX는 3자리·6자리·8자리 형태를 지원하고, RGB와 RGBA, HSL과 HSLA를 지원합니다. 공통 내부 표현을 거쳐 변환하므로 형식을 오가며 왕복해도 값이 어긋나지 않습니다.

접근성 검사를 통과하려면 명도 대비가 얼마나 필요한가요?

WCAG 2.1 AA 등급은 본문 텍스트에 4.5 대 1, 큰 텍스트에 3 대 1을 요구합니다. 큰 텍스트란 굵은 글씨 18.66픽셀 또는 일반 24픽셀 이상을 뜻합니다. AAA 등급은 각각 7 대 1과 4.5 대 1로 올라갑니다.

결과를 CSS에 바로 붙여넣어도 되나요?

네. 생성된 값은 유효한 CSS 색상 문법이라 스타일시트, 디자인 토큰 파일, 컴포넌트의 인라인 스타일에 수정 없이 그대로 붙여넣을 수 있습니다.