CSS 그라데이션 생성기
그라데이션을 눈으로 보며 만들고, 모든 최신 브라우저에서 작동하는 CSS를 복사하세요.
이 기기 안에서 봉인됨
브라우저에서 실행돼요. 아무것도 업로드되지 않아요.
봉인됨
미리보기
색상 지점
지점을 드래그하거나, 하나를 선택하고 화살표 키를 사용하세요. 막대를 클릭하면 지점이 추가돼요.
설정
OKLCH와 OKLab은 일부 그라데이션 가운데에 생기는 칙칙한 회색 구간을 피해 줘요. 구형 브라우저를 위한 표준 버전도 함께 들어가요.
CSS 코드
사용 방법
-
유형 고르기
선형, 원형, 원뿔형 그라데이션을 고르거나 프리셋으로 시작한 뒤 각도나 중심을 정하세요.
-
색상 편집하기
막대 위의 색상 지점을 드래그하고, 막대를 클릭해 지점을 추가하고, 각 지점의 색상과 위치를 바꾸세요.
-
CSS 복사하기
생성된 코드를 복사해 스타일시트에 배경으로 붙여 넣으세요.
자주 묻는 질문
선형, 원형, 원뿔형 그라데이션은 어떻게 다른가요?
선형 그라데이션은 고른 각도의 직선을 따라 색이 바뀌어요. 원형 그라데이션은 중심점에서 원이나 타원 모양으로 퍼져요. 원뿔형 그라데이션은 시계 바늘처럼 중심점을 돌며 바뀌어서 색상환이나 원그래프에 유용해요.
생성된 CSS가 모든 브라우저에서 작동하나요?
선형, 원형, 원뿔형 그라데이션은 현재의 모든 브라우저에서 작동해요. OKLCH나 OKLab 혼합을 고르면 코드 앞부분에 표준 줄도 함께 들어가서 구형 브라우저에서도 그라데이션이 보여요.
왜 그라데이션 가운데가 회색으로 보이나요?
표준 sRGB 공간에서 아주 다른 두 색을 섞으면 탁한 회색을 거치는 경우가 많아요. 혼합을 OKLCH나 OKLab으로 바꾸세요. 눈이 인식하는 방식대로 색을 섞어서 가운데도 밝게 유지돼요.
투명한 색상도 쓸 수 있나요?
네. 지점의 색상 칸에 rgb(52 66 217 / 0.4)나 #3442d966처럼 투명도가 있는 색을 입력하세요. 이미지 위에 겹치는 오버레이에 아주 좋아요.
색상 지점은 몇 개까지 넣을 수 있나요?
필요한 만큼 넣을 수 있어요. 각 지점은 마우스, 터치, 화살표 키로 옮길 수 있고, 지점이 두 개 이상 남아 있으면 삭제할 수 있어요.