CSS 그라데이션 생성기
두 색상과 각도로 CSS 선형 그라데이션 코드를 만듭니다.
입력
예시값이 입력되어 있습니다. 바로 확인하거나 값을 바꿔 보세요.
입력은 브라우저에서 처리합니다. 새로고침하면 예시값으로 돌아갑니다.
결과
입력된 예시값으로 바로 결과를 확인하거나 값을 바꿔 보세요.
6자리 HEX 색상 두 개를 사용합니다. 결과를 CSS background 속성에 붙여 넣으세요.
결과 공유
도구 링크와 결과 텍스트를 함께 공유합니다. 결과는 URL에 넣지 않습니다. 아래 내용을 확인하고 공유하세요.
계산·변환 기준
두 색으로 CSS 선형 그라데이션 코드 만들기.
linear-gradient(각도deg, 시작색, 끝색)
입력 예시
#000000 → #ffffff, 90도
90deg는 왼쪽에서 오른쪽으로 진행하는 그라데이션입니다. 시작색과 끝색을 입력하면 background 속성에 붙일 CSS를 만듭니다.
사용 방법
- 입력된 예시값을 사용하거나 시작 HEX, 끝 HEX, 각도 (도) 항목을 바꾸세요.
- 결과 확인하기를 누르고 아래 결과를 확인하세요.
- 필요하면 결과 복사로 가져갈 수 있습니다.
자주 묻는 질문
0도와 180도는 어느 방향인가요?
CSS에서 0deg는 위쪽, 180deg는 아래쪽을 향합니다. 이 도구는 두 개의 불투명 색상만 사용하며 중간 색상 지점이나 여러 색상은 출력 코드에서 별도로 조정해야 합니다.
계산 기준과 참고 자료
- W3C — CSS Images
linear-gradient() 방향과 색상 지점