CSS 그라데이션 생성기

브라우저 처리

선형·원형 그라데이션을 2~3개 색 정지점과 각도로 만들고, Sunset·Ocean·Mint 같은 프리셋과 무작위 생성으로 빠르게 시작해 background CSS로 복사합니다.

도구 실행입력 후 결과 확인

CSS 그라데이션 생성기 샘플 실행

버튼, 배너, 카드 배경에 쓰는 그라데이션은 색 두세 개와 방향만 정하면 CSS 한 줄로 만들 수 있습니다. 문제는 각도와 색을 바꿔 가며 어울리는 조합을 찾는 과정입니다.

브라우저 처리

샘플 입력

Linear · 135° · #0E8C7E → #2DD4BF

샘플 결과

background: linear-gradient(135deg, #0E8C7E, #2DD4BF);

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

CSS 그라데이션 생성기 사용 가이드

이 생성기는 Linear(선형)와 Radial(원형) 두 유형을 고르고, 선형이면 0~360° 각도를 슬라이더로 정합니다. 색 정지점은 두 개로 시작해 '색상 추가'로 세 번째 색을 넣거나 '제거'로 뺄 수 있고, 바꾸는 즉시 큰 미리보기와 코드가 함께 바뀝니다.

Sunset, Ocean, Grape, Mint, Dusk, Peach 프리셋을 누르면 유형·각도·색이 한 번에 바뀌고, '랜덤' 버튼은 새 조합을 만들어 줍니다. 결과는 background: linear-gradient(…) 형태로 바로 복사됩니다.

입력

Linear · 135° · #0E8C7E → #2DD4BF

결과

background: linear-gradient(135deg, #0E8C7E, #2DD4BF);

Radial로 바꾸면 radial-gradient(circle, #0E8C7E, #2DD4BF)가 됩니다.

보색 두 개를 이었더니 가운데가 회색으로 탁합니다.

sRGB로 섞이는 기본 그라데이션의 특징입니다. 가운데에 맑은 중간색을 세 번째 색으로 넣거나 컬러 믹서의 OKLab 중간색을 쓰세요.

그라데이션 위의 글자가 한쪽 끝에서 잘 안 읽힙니다.

가장 밝은 지점과 글자색의 대비를 컨트라스트 대비 확인기로 확인하고, 글자 뒤에 반투명 배경을 깔거나 색을 조정하세요.

각도를 90°로 했는데 위에서 아래로 바뀔 거라 예상했습니다.

CSS에서 0°는 아래→위, 90°는 왼쪽→오른쪽, 180°는 위→아래입니다.

색 정지점은 몇 개까지 넣을 수 있나요?

이 도구는 2~3개를 지원합니다. 더 복잡한 그라데이션은 복사한 코드에 색을 직접 더 적으면 됩니다.

원형 그라데이션의 중심을 옮길 수 있나요?

기본은 가운데 원형입니다. 복사한 코드의 circle을 circle at top left처럼 바꾸면 중심 위치를 옮길 수 있습니다.

랜덤 버튼은 어떤 색을 고르나요?

완전히 무작위인 색 두 개와 0~360° 사이 무작위 각도를 골라 바로 적용합니다. 어울림을 계산하지는 않으니, 마음에 드는 조합이 나오면 그 상태에서 색을 조금씩 다듬으세요.