CSS 그라디언트 생성기
CSS 그라디언트는 배경 이미지의 한 종류입니다. 왼쪽에서 오른쪽으로 빨강에서 파랑으로 바뀌는 그라디언트는 background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); 로, 흰색에서 검정으로 퍼지는 원형은 background: radial-gradient(circle at center, #ffffff 0%, #000000 100%); 로 씁니다.
사용 방법
- 프리셋을 고르거나 기본값에서 시작해 선형과 원형 가운데 하나를 고릅니다.
- 선형이면 슬라이더나 숫자 칸으로 각도를 정합니다. 0도는 위, 90도는 오른쪽, 180도는 아래, 270도는 왼쪽입니다. 원형이면 circle이나 ellipse를 고르고 중심 위치를 정합니다.
- 색 정지점을 고칩니다. 색 상자나 HEX 코드로 색을 바꾸고 위치를 0~100%로 정합니다. 정지점은 6개까지 더할 수 있고 지울 수도 있습니다. 균등 배치를 누르면 간격이 똑같아집니다.
- CSS 복사를 누릅니다. 첫 줄은 오래된 브라우저용 단색이고 둘째 줄이 그라디언트입니다.
계산 방법
선형 그라디언트는 직선 하나를 따라 색을 섞습니다. 각도는 그 선의 방향으로, 위쪽에서 시계 방향으로 잰 값입니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 갑니다. 정지점마다 색과 선 위의 위치가 짝지어지고, 브라우저가 이웃한 정지점 사이를 부드럽게 이어 줍니다.
원형 그라디언트는 중심에서 바깥으로 색을 섞습니다. 모양은 원(circle)이나 상자 크기에 맞춰 늘어나는 타원(ellipse)이고, at top left 같은 키워드로 중심을 옮깁니다. 위치 0%가 중심, 100%가 가장 먼 가장자리입니다.
CSS를 쓰기 전에 정지점을 위치 순으로 정렬하므로 편집한 순서는 상관없습니다. 두 정지점을 같은 위치에 두면 색이 섞이지 않고 경계가 딱 끊깁니다. 위치는 소수 둘째 자리에서 반올림합니다.
색은 3자리, 6자리, 8자리 HEX를 받습니다. 8자리의 마지막 두 자리는 알파 값이라 #11182700은 완전히 투명합니다. 투명으로 사라지는 그라디언트는 미리보기에서 체크무늬 위에 보입니다.
각도 한눈에 보기
| 각도 | 방향 | 키워드 표기 |
|---|---|---|
| 0deg | 아래에서 위 | to top |
| 90deg | 왼쪽에서 오른쪽 | to right |
| 180deg | 위에서 아래 | to bottom |
| 270deg | 오른쪽에서 왼쪽 | to left |
| 135deg | 왼쪽 위에서 오른쪽 아래 | to bottom right (대략) |
자주 묻는 질문
첫 줄이 왜 단색인가요?
그라디언트를 지원하지 않는 환경을 위한 대체 값입니다. 둘째 줄을 이해하는 브라우저는 그쪽을 쓰니, 필요 없으면 첫 줄은 지워도 됩니다.
135deg는 무슨 뜻인가요?
그라디언트 선이 오른쪽 아래를 향합니다. 왼쪽 위 모서리에서 시작해 오른쪽 아래에서 끝납니다. 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다.
부드럽게 섞이지 않고 딱 끊어지는 줄무늬를 만들려면?
두 정지점의 위치를 같게 하세요. 예를 들어 빨강 50%, 파랑 50%로 두면 가운데에서 경계가 선명하게 갈립니다.
투명하게 사라지게 하려면?
마지막 정지점을 #11182700 같은 8자리 HEX로 쓰세요. transparent 키워드로 사라지게 하면 예전 사파리 같은 오래된 브라우저에서 회색빛이 돌 수 있어서, 같은 색에 알파만 0으로 두는 편이 안전합니다.
conic-gradient도 되나요?
아직 안 됩니다. 이 도구는 선형과 원형 그라디언트만 다룹니다.
업로드되는 것이 있나요?
아니요. 미리보기와 CSS는 브라우저 안에서 만들어집니다.