CSS 그라데이션 생성기
선형·원형 CSS 그라데이션을 눈으로 보면서 만드세요. 색 지점을 추가하고 끌어 옮기고, 각도를 바꾸면 바로 미리보기에 반영돼요. CSS 코드는 한 번에 복사하고, 원하는 크기의 PNG 배경 이미지로도 저장할 수 있어요.
종류
모양
색 지점
막대를 누르면 색 지점이 추가돼요. 지점을 끌어 옮기세요.
추천 그라데이션
CSS 코드
사용 방법
- 선형 또는 원형을 고르고 각도(또는 모양)를 정하세요.
- 막대를 누르면 색 지점이 추가되고, 지점을 끌면 옮겨지며, 지점마다 색을 바꿀 수 있어요.
- CSS 코드를 복사하거나 크기를 골라 PNG로 저장하세요.
자주 묻는 질문
CSS 그라데이션은 어느 브라우저에서 되나요?
linear-gradient()와 radial-gradient()는 모든 최신 브라우저에서 접두사 없이 동작해요.
각도는 무슨 뜻인가요?
0°는 아래→위, 90°는 왼쪽→오른쪽, 180°는 위→아래 방향이에요.
PNG를 배경화면이나 썸네일 배경으로 써도 되나요?
네. 1920×1080, 1080×1920 또는 원하는 크기로 저장해 자유롭게 쓰세요.