CSS 그라디언트·그림자 생성기
그라디언트와 박스 그림자를 눈으로 확인하며 만들고 CSS 코드를 복사하세요.
그라디언트
정지점은 2개에서 5개까지 쓸 수 있고, 위치가 낮은 순서로 정렬해 출력합니다.
미리보기
생성된 CSS
박스 그림자
그림자 레이어는 최대 4개까지 쓸 수 있습니다.
미리보기
생성된 CSS
CSS 그라디언트·그림자 생성기 사용 안내
값을 바꾸면 미리보기와 CSS 코드가 바로 갱신됩니다. 마음에 드는 결과가 나오면 CSS 복사를 눌러 스타일시트에 붙여 넣으세요.
처리 한계
- 색상은 #RGB, #RGBA, #RRGGBB, #RRGGBBAA 형식의 hex만 입력할 수 있으며 앞의 #는 생략해도 됩니다.
- 범위를 벗어난 숫자는 가장 가까운 허용 값으로 맞춥니다. 각도는 0~360, 위치와 투명도는 0~100, 오프셋과 스프레드는 -200~200, 블러는 0~200입니다.
- 숫자는 소수 둘째 자리까지만 반영합니다.
- 원형 그라디언트는 중심에서 퍼지는 원 모양(circle)만 만듭니다.
자주 묻는 질문
입력한 내용이 서버로 전송되나요?
아니요. 모든 계산은 이 브라우저 안에서 실행되며 입력과 결과를 저장하거나 전송하지 않습니다. 새로고침하면 처음 값으로 돌아갑니다.
정지점 순서를 바꾸면 결과가 달라지나요?
출력 CSS는 항상 위치가 낮은 순서로 정렬됩니다. 위치가 같은 정지점은 입력한 순서를 유지합니다.
투명도는 어떻게 적용되나요?
그림자 색상에 8자리 hex의 알파 값이 있으면 투명도(%)와 곱해서 rgba()로 출력합니다. 투명하지 않으면 6자리 hex로 출력합니다.