CSS gradient 생성기

언제 사용하나요?

배경에 그라디언트 효과를 추가할 때 색상과 각도를 슬라이더로 조정하며 실시간으로 미리보고 CSS를 생성합니다.

사용 방법

• 시작 색상과 끝 색상을 선택합니다.
• 그라디언트 각도를 조정합니다.
• 미리보기에서 결과를 확인하고 CSS를 복사합니다.

입력값 안내

그라데이션에 사용할 시작 색상, 끝 색상, 그리고 선형 방향(각도: 0~360도)을 선택합니다.

계산·변환 기준

사용자가 지정한 각도와 색상 헥스(HEX) 코드를 결합하여 `linear-gradient([Angle]deg, [Color1], [Color2])` 형태의 CSS 속성 문자열을 빌드하고, 미리보기 영역의 `background` 속성에 적용합니다.

사용 예시

• 배경 스타일 생성 - 두 색상의 선형 그라디언트를 미리 보며 생성합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• 90도, 빨강에서 파랑 → background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%)
• 45도, 보라→분홍 → 배너 배경용 linear-gradient 코드 생성

주의사항

• 생성된 CSS 그라디언트는 참고용입니다. IE 11 이하에서 -webkit- 벤더 프리픽스가 필요할 수 있습니다.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

CSS 그라데이션 종류

linear-gradient는 직선 방향, radial-gradient는 원형으로 색이 퍼지고, conic-gradient는 각도 기반으로 색이 회전합니다.

색상 정지점 활용

색상과 위치(%)를 여러 개 지정해 무지개, 투명 페이드, 줄무늬 효과 등을 만들 수 있습니다. 생성된 코드를 그대로 CSS에 붙여넣으면 됩니다.

자주 묻는 질문

어떤 그라디언트를 만들 수 있나요?

두 색상 기반 linear-gradient를 생성합니다.

그라디언트를 미리 볼 수 있나요?

네. 색상과 각도를 바꾸면 미리보기 영역에 즉시 반영됩니다.

방사형 그라디언트도 되나요?

이 도구는 linear-gradient 중심이며, 각도를 바꿔 다양한 방향의 선형 그라디언트를 만들 수 있습니다.

색상을 세 개 이상 넣을 수 있나요?

여러 색상 정지점을 추가해 다채로운 그라디언트를 만들 수 있고, 각도를 바꿔 방향을 조절할 수 있습니다.

관련 도구

• 색상 코드 변환기 - HEX, RGB, RGBA, HSL, HSLA 색상 코드를 서로 변환하고 색상을 미리봅니다.
• CSS box-shadow 생성기 - 슬라이더로 그림자 값을 조정하고 box-shadow CSS를 생성합니다.
• CSS easing 생성기 - cubic-bezier 값을 조정해 CSS easing 함수를 생성합니다.
• 색상 음영 팔레트 생성기 - 기준 HEX 색상 하나로 50~950 단계의 Tailwind 스타일 음영 팔레트를 생성합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.