🌈 CSS 그라데이션 생성기
색과 위치, 각도를 고르면 CSS linear-gradient·radial-gradient·conic-gradient 배경 코드를 만들어 바로 미리 보여 줘요. 투명도, 반복, 하드 스톱까지 지원하고 단색 fallback 줄도 같이 붙여 줘요.
사용법
- 종류를 고르세요. 선형(linear)은 한 방향으로, 원형(radial)은 한 점에서 바깥으로, 원뿔(conic)은 한 점을 중심으로 빙 돌면서 색이 바뀌어요.
- 각도 슬라이더로 방향을 정해요. 선형에서 0°는 위쪽이고 시계 방향으로 돌아 90°는 오른쪽, 180°는 아래쪽, 270°는 왼쪽이에요. 원뿔은 시작 방향이 돼요.
- 색 중단점에서 색을 고르고, 위치(0~100%)와 불투명도를 정해요. 중단점은 최대 6개까지 늘릴 수 있고, '순서 뒤집기'는 색 순서를 반대로 돌려요.
- 오른쪽 css 칸에 나온 코드를 copy 해서 스타일시트나 style 속성에 붙여 넣어요. 첫 줄은 단색 fallback, 둘째 줄이 그라데이션이에요.
- 위쪽 버튼의 프리셋(오션·선셋·민트 3색 등)을 누르면 예시 값으로 시작할 수 있어요.
그라데이션 세 가지 문법
MDN이 정리한 CSS 이미지 값 <gradient> 문법을 그대로 쓰며, 모든 코드는 background나 background-image에 넣어요.
| 종류 | 형태 | 예시 (이 도구로 만든 코드) |
|---|---|---|
| 선형 | linear-gradient(각도, 색 위치, …) | linear-gradient(135deg, #2a78d6 0%, #1baf7a 100%) |
| 원형 | radial-gradient(모양 at 중심, 색 위치, …) | radial-gradient(circle at center, #2a78d6 0%, #1baf7a 100%) |
| 원뿔 | conic-gradient(from 각도 at 중심, 색 위치, …) | conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #ffff00 33.33%, #00ff00 66.67%, #ff0000 100%) |
각 함수 앞에 repeating-을 붙이면 같은 패턴이 반복돼요. 예를 들어 repeating-linear-gradient(90deg, #ff0000 0%, #0000ff 20%)는 빨강에서 파랑으로 가는 20% 폭 줄무늬가 가로로 계속 이어져요.
색 중단점(color stop) 읽는 법
중단점 하나는 색 + 위치예요. 위치가 0%이면 시작점, 100%이면 끝점이고, 두 중단점 사이는 브라우저가 부드럽게 섞어요. 이 도구는 중단점을 위치 오름차순으로 정렬해서 코드를 만들어요. 순서가 뒤섞여 입력돼도 결과가 같고, 같은 위치에 두 색을 두면 섞이지 않고 경계가 칼처럼 갈라지는 하드 스톱이 돼요.
하드 스톱 예시 — 반반 나뉜 배경
빨강 0%, 빨강 50%, 파랑 50%, 파랑 100%로 입력하면 linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%)가 되어 왼쪽 절반은 빨강, 오른쪽 절반은 파랑으로 딱 갈려요. 같은 방식으로 3등분 배경이나 가는 줄무늬를 만들 수 있어요.
투명도
불투명도를 100% 아래로 내리면 #000000 대신 rgba(0, 0, 0, 0.5) 형태로 바뀌어요. 이미지 위에 어두운 막을 씌우는 linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%) 같은 코드가 대표적이에요. 투명한 중단점은 'transparent' 키워드 대신 같은 색의 불투명도 0%를 쓰는 편이 중간 색이 탁해지는 일이 없어요.
자주 쓰는 방향 각도
| 각도 | 방향 | to 키워드 표기 |
|---|---|---|
| 0deg | 아래에서 위로 | to top |
| 90deg | 왼쪽에서 오른쪽으로 | to right |
| 180deg | 위에서 아래로 (기본값) | to bottom |
| 270deg | 오른쪽에서 왼쪽으로 | to left |
| 45deg / 135deg | 왼쪽 아래→오른쪽 위 / 왼쪽 위→오른쪽 아래 | to top right / to bottom right 와 비슷 (정사각형일 때 같음) |
각도를 생략하면 기본값은 180deg(위→아래)예요. to bottom right 같은 키워드는 상자의 가로세로 비율에 따라 실제 각도가 달라지고, 숫자 각도는 항상 같은 방향이에요. 이 도구는 숫자 각도를 써서 어떤 크기의 상자에서도 방향이 일정해요.
그라데이션을 쓸 때 알아 둘 것
- fallback 한 줄 — 그라데이션을 읽지 못하는 환경에서는 바로 위의 단색 background가 적용돼요. 이 도구는 첫 중단점 색으로 그 줄을 같이 만들어요.
- 글자 대비 — 그라데이션 위에 글자를 올리면 구간마다 배경 밝기가 달라 읽기 어려워질 수 있어요. 가장 밝은 곳과 가장 어두운 곳에서 모두 대비가 충분한지 색상 대비 검사기로 확인해요.
- 색 띠 현상(banding) — 비슷한 두 색 사이를 넓게 칠하면 모니터에서 줄무늬가 보일 수 있어요. 색 차이를 조금 키우거나 중간 색을 하나 더 넣으면 줄어요.
- 색 고르기 — 두 색의 색상(hue) 차이가 너무 크면 가운데가 탁해 보여요. 인접한 색을 고르거나 중간 중단점을 직접 넣어 보세요. 색 코드 변환은 색상 변환기를 써요.
- 성능 — CSS 그라데이션은 이미지 파일이 아니라 브라우저가 그려서 파일 용량이 0이고, 화면 크기에 맞춰 늘어나도 선명해요.
코드를 붙이는 방법
만든 코드는 선택자 안에 그대로 넣어요. 예를 들어 .banner { background: #2a78d6; background: linear-gradient(135deg, #2a78d6 0%, #1baf7a 100%); }처럼 쓰면 되고, 첫 줄은 그라데이션을 못 읽는 환경의 대체 색이에요. 상자 크기에 맞춰 자동으로 늘어나니 background-size를 따로 정하지 않아도 돼요. 같은 상자에 이미지와 그라데이션을 겹칠 때는 쉼표로 이어서 background: linear-gradient(…), url(photo.jpg);처럼 쓰고, 앞에 쓴 것이 위에 놓여요.
글자에 그라데이션 입히기
글자 색을 그라데이션으로 칠하려면 만든 배경 코드에 -webkit-background-clip: text; background-clip: text; color: transparent;를 더해요. 배경이 글자 모양으로 잘리면서 글자 안쪽만 그라데이션으로 보여요. 글자 굵기가 얇으면 색 변화가 잘 안 보이니 제목처럼 굵고 큰 글자에 어울려요.
많이 쓰는 활용 예
| 용도 | 만드는 방법 |
|---|---|
| 버튼·배너 배경 | 선형 135deg, 같은 계열 색 두 개. 색상 차이를 10~30° 정도로 두면 자연스러워요 |
| 이미지 위 어두운 막 | 선형 180deg, 투명 0% → 검정 70% 불투명도. 사진 위 글자 가독성을 높여요 |
| 스포트라이트·비네팅 | 원형, 가운데 밝은 색 0% → 가장자리 어두운 색 100% |
| 파이 차트 모양 | 원뿔, 색 두 개를 같은 위치에 두는 하드 스톱으로 비율만큼 나눠요 |
| 줄무늬 | repeating 선형, 두 색을 같은 위치에 겹쳐 하드 스톱으로 만들고 10~20% 폭으로 반복해요 |
문법 출처: MDN Web Docs 「<gradient>」. 코드 생성 규칙은 위 예시를 같은 코드로 검산했고, 선택한 색은 브라우저 안에서만 처리돼요. 이미지 크기를 비율로 맞추려면 이미지 비율 계산기, 픽셀을 rem으로 바꾸려면 px ↔ rem 변환기를 쓰세요.