Total0
Today0
Yesterday0

업데이트 노트

v2.1.0 (2026.04.24)
  • Section Divider Generator 신규 추가
  • Aspect Ratio Calculator 신규 추가
  • CSS Animation Generator 신규 추가
v2.0.0 (2026.04.24)
  • CSS Grid Generator 신규 추가
  • 시각적 그리드 설계 및 자동 코드 생성 기능
v1.6.0 (2026.04.24)
  • WCAG Contrast Checker 신규 추가
  • 웹 접근성을 위한 컬러 대비 자동 검사
v1.5.0 (2026.04.24)
  • CSS Flexbox Visualizer 신규 추가
  • 레이아웃 속성 시각화 및 자동 코드 생성
v1.4.0 (2026.04.24)
  • CSS Gradient Generator 신규 추가
  • 컬러 변환기 시각적 컬러피커 기능 강화
  • CSS 도구(Minifier) 성능 및 UI 개선
v1.3.0 (2026.04.24)
  • 색상 변환기 (HEX ↔ RGB ↔ HSL) 추가
  • CSS Minifier / Formatter 도구 추가
  • CSS Clamp 생성기 UI 디자인 전면 개편
v1.2.0 (2026.04.23)
  • CSS 스타일 및 시각화 생성기 추가
  • Box Shadow & Text Shadow 생성기
  • Border-Radius 생성기 (Liquid Shape)
  • 글래스모피즘 & 뉴모피즘 생성기
v1.1.0 (2026.03.23)
  • PX ↔ REM 변환기 및 CSS Clamp 생성기 기능 추가
  • 상단 네비게이션(GNB) 추가 및 보조 도구 사용성 개선
  • 모바일 환경 UI 최적화(가독성 개편 및 vw 적용 확대)
v1.0.1 (2026.03.23)
  • CSS "속성삭제" 체크 시 주석이 포함된 경우 발생하는 변환 오류 수정
  • 광고 배너 높이 조정
v1.0.0 (2024.10.01)
  • PX ↔ VW 양방향 변환 기본 기능 출시
  • Breakpoints 프리셋 제공 및 CSS 텍스트 일괄 변환 지원
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

CSS Gradient Generator

선형, 방사형 그라데이션을 시각적으로 설계하고 즉시 CSS 코드를 추출하세요.

LIVE PREVIEW

⚙️ Settings

🎁 Presets

🎨 Color Stops

CSS Code

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

📖 사용 방법

  • Gradient Type: 선형(Linear)은 특정 각도 방향으로, 방사형(Radial)은 중심에서 바깥쪽으로 퍼지는 효과를 줍니다.
  • Color Stops: 컬러칩을 클릭하여 색상을 변경하고, 우측의 숫자를 조절하여 색상이 시작되는 지점(%)을 설정할 수 있습니다.
  • Add/Remove: 최대 10개까지 컬러 스톱을 추가하여 복잡하고 화려한 멀티 그라데이션을 만들 수 있습니다.
  • Presets: 검증된 프리미엄 그라데이션 조합을 클릭 한 번으로 적용해 보세요.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.