CSS 그라데이션 생성기
두 색상과 각도를 정하면 CSS 그라데이션 코드를 바로 만들어줍니다.
CSS 그라데이션 생성기 사용법
- 색상 칸 두 개에서 시작 색과 끝 색을 각각 고릅니다. 고르는 즉시 미리보기에 반영됩니다.
- 각도 값을 바꾸면 미리보기 상자가 바로 그 방향으로 바뀝니다.
- 아래 칸에 background 속성 한 줄이 그때그때 만들어집니다.
- 복사 버튼을 눌러 CSS 파일이나 스타일 속성에 붙여넣습니다.
각도 숫자가 가리키는 방향
CSS의 linear-gradient 각도는 위쪽을 0도로 두고 시계 방향으로 잽니다. 각도가 가리키는 쪽에 두 번째 색이 놓입니다. 자주 쓰는 값은 아래와 같습니다.
| 각도 | 색이 흐르는 방향 |
|---|---|
| 0deg | 아래에서 위로 |
| 45deg | 왼쪽 아래에서 오른쪽 위로 |
| 90deg | 왼쪽에서 오른쪽으로 |
| 135deg | 왼쪽 위에서 오른쪽 아래로 |
| 180deg | 위에서 아래로 |
| 270deg | 오른쪽에서 왼쪽으로 |
각도는 360도 주기로 해석되어 -90deg는 270deg와 같은 방향입니다.
만들어지는 코드의 형태
결과는 background 속성에 linear-gradient 한 줄을 넣은 형태입니다. 색은 색상 선택기가 주는 여섯 자리 16진수로 들어가고 중간 색이나 색이 멈추는 위치 지정은 포함되지 않습니다. 색을 세 개 이상 쓰거나 원형으로 퍼지게 하려면 복사한 코드에 값을 직접 더해 쓰면 됩니다.
자주 묻는 질문
생성된 코드는 어떻게 쓰나요?
복사 버튼을 눌러 CSS 파일의 background 속성에 그대로 붙여넣으면 됩니다.
색상을 3개 이상 쓸 수 있나요?
현재는 2가지 색상 기준이며, 필요하시면 다색 그라데이션 기능도 추가해드릴 수 있습니다.
각도는 어떻게 정하나요?
0도는 아래에서 위로, 90도는 왼쪽에서 오른쪽으로 향하는 방향입니다.
투명해지는 그라데이션도 되나요?
이 도구로는 안 됩니다. 색상 선택기가 불투명한 색만 주기 때문입니다. 복사한 코드에서 색 부분을 rgba 값으로 바꾸면 투명해지는 효과를 낼 수 있습니다.
-webkit- 접두사를 붙여야 하나요?
지금은 필요 없습니다. linear-gradient는 현재 쓰이는 브라우저에서 접두사 없이 동작하므로 만들어진 코드를 그대로 넣으면 됩니다.
글자에도 그라데이션을 넣을 수 있나요?
이 코드만으로는 배경에만 적용됩니다. 글자에 넣으려면 만든 코드에 background-clip과 글자색을 투명하게 만드는 속성을 함께 써야 합니다.