그라데이션 배경 만들기

배경에 쓸 그라데이션을 바로 만들어요

색을 고르고 종류를 고르면 위 미리보기가 바로 바뀌어요. 마음에 들면 원하는 크기로 PNG·SVG를 받거나, 웹사이트라면 CSS 코드를 복사해 그대로 붙여 넣으면 돼요. 선형·원형·원뿔은 미리보기와 저장 그림, CSS 결과가 같은 규칙으로 그려져요. 메시는 CSS에 같은 기능이 없어서 원형 그라데이션 여러 겹으로 비슷하게 흉내 낸 코드를 줘요.

종류

• 선형 — 정한 각도로 색이 바뀌어요. 각도는 CSS와 같이 0°가 아래→위, 90°가 왼쪽→오른쪽, 135°가 왼쪽 위→오른쪽 아래예요. 그라데이션 선의 길이도 CSS 명세처럼 그림의 모서리가 정확히 처음·끝 색이 되도록 계산해요.
• 원형 — 정한 중심에서 가장 먼 모서리까지 동그랗게 퍼져요.
• 원뿔 — 중심을 돌며 색이 바뀌어요. 색상환·파이 차트 느낌의 배경에 좋아요.
• 메시(번짐) — 첫 번째 색을 바탕에 깔고 나머지 색을 여러 곳에서 부드럽게 번지게 해요. 요즘 앱 배경에 많이 쓰는 몽환적인 느낌이에요. 각도와 중심을 바꾸면 번지는 자리가 바뀌어요.

그레인과 띠 무늬

그라데이션을 크게 저장하면 색이 계단처럼 끊어진 띠(밴딩)가 보일 때가 있어요. 색 단계가 256개뿐이라 생기는 현상인데, 아주 약한 잡음(그레인)을 섞으면 띠가 눈에 띄지 않아요. 2~6% 정도면 충분하고, 더 올리면 필름 느낌이 나요. 그레인은 PNG에만 들어가고 CSS·SVG에는 들어가지 않아요.

SVG로 받을 때

선형·원형·메시는 진짜 벡터 그라데이션 SVG로 저장해 아무리 키워도 매끄러워요. SVG에는 원뿔 그라데이션 기능이 없어서 원뿔은 그림을 넣은 SVG로 저장해요.

참고한 자료

• CSS Images Module Level 3 — linear-gradient 각도와 길이
• CSS Images Module Level 4 — conic-gradient