그라데이션 생성기

사용방법 두 색상과 방향을 정하고 그라데이션을 만드세요.

0도는 위쪽, 90도는 오른쪽, 180도는 아래쪽, 270도는 왼쪽으로 향합니다.

두 색으로 CSS 배경을 만드세요

첫 색상이 시작점, 두 번째 색상이 끝점인 선형 그라데이션입니다. 90도에 남색과 빨강을 넣으면 왼쪽의 남색이 오른쪽으로 갈수록 빨강에 가까워집니다.

CSS 코드는 어디에 쓰나요?

복사한 background 선언을 원하는 요소의 CSS 규칙 안에 넣으세요. 미리보기는 도구의 예시 영역에만 적용하며 사이트 자체 디자인은 바꾸지 않습니다.

세 색이나 투명도도 지원하나요?

현재는 불투명 HEX 색상 두 개만 지원합니다. #RGB와 #RRGGBB를 사용할 수 있습니다. 원형 그라데이션이나 중간 색상 지점 조절은 지원하지 않습니다.

글자를 올려도 잘 보일까요?

배경색이 위치마다 달라집니다. 글자를 놓을 위치에서 충분한 대비가 있는지 따로 확인하세요. 입력값이나 코드를 서버에 전송하거나 저장하지 않습니다.