CSS 그라디언트 생성기
그라디언트를 시각적으로 디자인하고 CSS 코드를 한 번에 복사하세요.
- 그라디언트 유형(선형·방사형·원뿔형)을 선택합니다.
- 각도 슬라이더를 드래그해 방향을 조정합니다.
- 색상 스와치를 클릭해 컬러 피커를 열거나 HEX 코드를 직접 입력합니다.
- 위치 슬라이더를 드래그해 색상 정지점을 이동합니다.
- 「정지점 추가」로 색상을 더 추가하거나 × 버튼으로 삭제합니다.
- 프리셋을 선택해 빠르게 시작할 수 있습니다.
- 「복사」 버튼으로 CSS를 복사한 뒤 스타일시트에 붙여넣으세요.
팁: 생성된 CSS는 background 또는 background-image 속성에 바로 붙여넣을 수 있으며 모든 최신 브라우저에서 호환됩니다.
언제 사용하나요?
- 히어로 섹션, 버튼, 카드에 그라디언트 배경을 추가할 때.
- 이미지 위에 반투명 그라디언트 오버레이를 적용할 때.
- 디자인 확정 전에 색상 조합을 빠르게 탐색할 때.
선형·방사형·원뿔형의 차이는?
선형은 지정한 각도 방향으로 색을 혼합합니다. 방사형은 중심에서 타원 또는 원형으로 퍼지며 혼합됩니다. 원뿔형은 중심점을 축으로 색이 회전하여 파이 차트와 같은 효과를 만듭니다.
투명도를 적용하려면?
CSS 출력에서 HEX 코드를 rgba(99, 102, 241, 0)로 바꾸거나 transparent 키워드를 사용하세요. 모든 최신 브라우저에서 지원됩니다.
출력 CSS는 모든 브라우저에서 호환되나요?
선형과 방사형 그라디언트는 모든 최신 브라우저(Chrome·Firefox·Safari·Edge)에서 접두사 없이 동작합니다. 원뿔형 그라디언트는 모든 에버그린 브라우저에서 지원됩니다.
색상 정지점을 2개 이상 추가할 수 있나요?
네. 「정지점 추가」를 원하는 만큼 클릭하면 됩니다. CSS 명세에는 정지점 수 제한이 없습니다.
이미지 형식 선택 가이드：JPG·PNG·WebP·GIF 완전 비교
왜 PNG는 JPG보다 몇 배나 클까요? WebP는 언제 써야 할까요? GIF는 이제 구식인가요? 압축 원리부터 시작해 상황별 최적 형식을 선택하는 방법을 정리했습니다.
색상 대비와 접근성: WCAG 기준·대비율 계산 원리와 개선 기법
색상 대비율은 접근 가능한 웹 디자인의 핵심 지표로, 저시력·색맹·일반 사용자의 다양한 환경에서의 가독성에 영향을 미칩니다. WCAG 2.1 AA/AAA 등급, 상대적 휘도 계산 공식, 흔한 디자인 실수와 수정 전략을 설명합니다.
색상 코드 완전 가이드：RGB·HEX·HSL 변환 원리와 디자인 활용
RGB, HEX, HSL은 모두 같은 색을 표현하지만 방식이 전혀 다릅니다. 각 색상 모델의 설계 논리, 변환 수학, 사용 기준부터 WCAG 접근성 대응까지 완벽하게 정리합니다.
소셜 콘텐츠 이미지 편집 가이드: 규격, 비주얼 일관성, 내보내기 설정
소셜 콘텐츠의 완성도는 아이디어만으로 결정되지 않습니다. 이미지 크기, 구도, 브랜드 일관성, 출력 설정까지 재사용 가능한 편집 워크플로를 정리했습니다.
Markdown 완전 가이드：기초 문법부터 실전 활용까지
Markdown은 작가·개발자·콘텐츠 크리에이터가 가장 많이 사용하는 경량 마크업 언어입니다. 기본 문법부터 고급 테크닉, 플랫폼별 활용법까지 완전히 해설합니다.
PDF 병합·분할·압축 완전 정복：일상 문서 정리 가이드
큰 PDF에서 필요한 페이지만 꺼내고 싶다면? 여러 보고서를 하나로 합쳐야 한다면? 파일이 너무 커서 업로드가 안 된다면? 가장 흔한 PDF 작업 4가지를 설치 없이 해결하는 방법을 알아봅니다.