🎨
그래디언트 생성기
CSS 그래디언트를 시각적으로 생성하고 코드를 복사하세요
그래디언트 타입
135°
색상
#667EEA
#764BA2
CSS 코드
background: linear-gradient(135deg, #667EEA, #764BA2);
프리셋
사용 방법
- 1선형(Linear) 또는 원형(Radial) 그래디언트 타입을 선택하세요.
- 2색상 피커로 원하는 색상을 지정하고, 필요하면 3번째 색상을 추가하세요.
- 3선형 그래디언트의 경우 각도 슬라이더로 방향을 조절하세요.
- 4생성된 CSS 코드를 복사하여 프로젝트에 바로 적용하세요.
활용 예시
- •웹사이트 배경 그래디언트 디자인
- •버튼, 카드 등 UI 요소에 그래디언트 적용
- •SNS 배너, 썸네일 배경색 결정
- •CSS 그래디언트 코드 빠르게 생성
자주 묻는 질문
Q. 색상을 몇 개까지 추가할 수 있나요?
A. 최대 3개까지 색상을 추가할 수 있습니다. 2색 또는 3색 그래디언트를 만들 수 있습니다.
Q. 프리셋은 어떻게 사용하나요?
A. 하단의 프리셋을 클릭하면 미리 정의된 색상 조합이 자동으로 적용됩니다. 이후 자유롭게 수정할 수 있습니다.
관련 도구
디자인 전체 보기 →🎨✏️🎲📱🍅👥
색상 변환기
HEX, RGB, HSL 색상 코드를 실시간 변환하고 보색, 유사색, 삼각 배색 팔레트를 생성합니다. WCAG 명도 대비 검사도 지원.
글자 수 세기
텍스트의 글자 수, 단어 수, 바이트, 문장 수를 실시간으로 세어줍니다. 블로그 글쓰기, SNS 글자수 제한 확인에 활용하세요.
주사위 게임
4면체부터 20면체까지 다양한 주사위를 굴려보세요. 보드게임, TRPG, 랜덤 결정에 활용할 수 있는 무료 온라인 주사위.
QR코드 생성기
URL, 텍스트, 연락처 정보를 QR코드로 변환합니다. 생성된 QR코드를 PNG로 다운로드하여 명함, 포스터에 활용하세요.
뽀모도로 타이머
25분 집중, 5분 휴식을 반복하는 뽀모도로 기법 타이머입니다. 공부, 업무 집중력 향상에 효과적인 시간 관리 도구.
팀 나누기
참가자 명단을 입력하면 원하는 수의 팀으로 랜덤 배정합니다. 체육대회, 조별 과제, 회사 팀빌딩에 활용하세요.