CSS 그라디언트 생성기

쓰는 법

1. 선형(linear) / 방사형(radial) 중 타입 선택.
2. 색상 중지점 추가해서 원하는 색 고르기 (최대 8개).
3. 슬라이더로 각 색상 위치(0% ~ 100%) 조정.
4. 선형이면 각도 슬라이더로 방향 정하기 (0~360°).
5. 아래 CSS 코드창에서 복사 한 번.

예시

타입: 선형 | 각도: 135°
색상1: #667eea (0%)
색상2: #764ba2 (100%)

결과:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

그라디언트 문법, 외우지 말고 드래그로 만들기

linear-gradient(135deg, #667eea 0%, #764ba2 100%)... 매번 이거 직접 타이핑하려면 각도 감도 안 오고 색상 위치도 긴가민가하죠. 여기는 색상 선택기로 색 고르고 슬라이더로 위치 잡으면 CSS가 실시간으로 쓰여져요. 선형(방향성)이랑 방사형(원형) 둘 다 됩니다.

이럴 때 쓰시면 좋아요

버튼이나 카드 배경 꾸밀 때, 히어로 섹션 배경 만들 때, 포토샵 없이 CSS만으로 색 전환 효과 주고 싶을 때요.

여기 쓰기 편한 점

• 색 바꾸자마자 미리보기가 업데이트돼서 감 잡기 쉬워요.
• 중지점을 최대 8개까지 넣을 수 있어서 복잡한 멀티컬러 그라디언트도 만들 수 있어요.
• 프리셋 6종 기본 제공. 그대로 쓰거나 살짝 수정해서 쓰시면 됩니다.
• 최신 표준 문법만 뽑아서 별도 벤더 프리픽스 없이 바로 붙여 쓸 수 있어요.
• 회원가입 같은 거 없고, 모든 처리는 브라우저 안에서 돌아갑니다.
• 한계: conic-gradient(원뿔형)는 지원 안 해요. 그건 직접 CSS 작성하셔야 합니다.

다른 그라디언트 도구랑 비교

더 파보고 싶다면

• MDN: CSS gradient - 공식 문서

자주 묻는 질문