CSS 그라데이션 만드는 법
색상점을 명시해 반복되지 않는 배경 이미지 하나를 만들어요. 모든 값이 화면에 보여 드래그 편집기 없이도 같은 CSS를 재현할 수 있어요.
- 선형 또는 방사형을 고르세요.
- 색상점 개수를 2·3·4개 중에서 고르세요.
- 각 HEX 색상, 불투명도와 백분율 위치를 입력하세요.
- 선형은 각도를, 방사형은 중심 X·Y를 설정하세요.
- 생성한 뒤 미리보기와 CSS 값을 비교하고 복사하세요.
선형·방사형 문법
선형 그라데이션은 직선을 따라 변해요. CSS에서 0deg는 위쪽이고 양의 각도는 시계 방향이에요. linear-gradient(angle, stops)로 출력해요. 방사형은 한 점에서 바깥으로 퍼지며 radial-gradient(circle at X% Y%, stops)로 출력해요. 둘 다 background-image 같은 속성에 쓸 수 있는 유효한 CSS 이미지 값이에요.
색상점·불투명도·같은 위치
각 색상점은 색과 그라데이션 선 위의 위치로 이루어져요. CSS 자체는 범위 밖의 색상점도 허용하지만 예측 가능한 편집을 위해 여기서는 위치를 0~100%로 제한해요. 오름차순으로 입력해야 해요. 인접한 두 색의 위치가 같으면 서서히 섞이지 않고 선명한 경계가 생겨요. 불투명도가 1보다 작을 때만 rgba()로 출력해요.
입력을 바꾸면 미리보기가 지워지는 이유
미리보기는 표시된 출력값을 확정해서 렌더링한 결과예요. 설정을 바꾸면 이전 결과·복사 상태·미리보기가 바로 무효가 돼요. CSS 생성을 다시 눌러 현재 설정을 적용하세요. 새 입력 옆에 이전 CSS가 남지 않고 복사한 선언이 확정된 브라우저 렌더링과 일치하도록 하기 위해서예요.
지원 범위와 브라우저 확인
- 순서대로 입력한 색상점 2~4개. 같은 위치도 지원해요.
- 중심을 백분율로 정하는 원형 방사형 한 가지 형태.
- 0~360도의 선형 각도 하나.
- 반복 그라데이션, 드래그 핸들, 프리셋, 팔레트 추천, 애니메이션, 이미지 내보내기와 브라우저 접두사는 제공하지 않아요.
- 콘텐츠 뒤에 배치할 때는 글자 대비를 따로 확인하세요. 그라데이션 미리보기만으로 접근성이 검증되지는 않아요.
예시
linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0.5) 100%)는 가로 방향이며 끝의 파랑이 반투명이에요.
radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%)는 중심을 왼쪽 아래 쪽에 놓아요.
자주 묻는 질문
두 색상점이 같은 위치를 써도 되나요?
네. 인접한 위치가 같으면 그대로 유지하고 선명한 색 경계를 만들어요.
위치를 오름차순으로 입력하는 이유는?
색상점 순서를 명확히 정해 복사한 CSS에서 예상하지 못한 자동 보정이 생기지 않도록 해요.
불투명도를 바꾸면 요소 전체가 투명해지나요?
아니요. 해당 색상점의 색만 바뀌어요. 최종 모습은 그라데이션 뒤에 있는 내용에도 영향을 받아요.
브라우저별 접두사가 없는 이유는?
현대 브라우저용 표준 문법을 접두사 없이 출력해요.