A powerful and intuitive gradient generator built with React and Canvas API. Create beautiful gradients with various shapes, directions, and export them as high-quality PNG images.

React와 Canvas API로 구축된 강력하고 직관적인 그라데이션 생성기입니다. 다양한 도형과 방향으로 아름다운 그라데이션을 만들고 고품질 PNG 이미지로 내보낼 수 있습니다.

• Color Picker: Advanced color selection with HSL and RGB support
• Start & End Colors: Define gradient color points with precision
• Real-time Preview: See changes instantly as you adjust colors

• Rectangle (직사각형): Standard rectangular gradients
• Square (정사각형): Perfect square gradients
• Circle (원형): Circular gradient shapes

• Horizontal (수평): Left to right gradients
• Vertical (수직): Top to bottom gradients
• Diagonal Down (대각선 ↘): Top-left to bottom-right
• Diagonal Up (대각선 ↗): Bottom-left to top-right
• Radial (원형): Center-outward radial gradients

• Width: 100px - 800px range with slider control
• Height: 100px - 600px range with slider control
• Real-time Adjustment: Dynamic resizing with live preview

• High-quality PNG: 2x resolution for crisp exports
• Instant Download: One-click file saving
• Optimized Canvas: Hardware-accelerated rendering

• Node.js 18+ installed
• npm or yarn package manager

# Clone the repository | 저장소 클론
git clone https://github.com/[username]/react-gradient-generator.git
cd react-gradient-generator

# Install dependencies | 의존성 설치  
npm install

# Start development server | 개발 서버 시작
npm run dev

For convenience, we provide multiple launcher scripts that automatically handle server startup:

편의를 위해 서버 시작을 자동으로 처리하는 여러 런처 스크립트를 제공합니다:

# Batch file | 배치 파일
./launchers/gradient-generator-start.bat

# PowerShell script | PowerShell 스크립트  
./launchers/gradient-generator-start.ps1

# VBS script | VBS 스크립트
./launchers/gradient-generator-start.vbs

# Shell script | 셸 스크립트
./launchers/gradient-generator-start.sh

# Desktop shortcut | 데스크탑 바로가기
./launchers/gradient-generator.desktop

# Node.js launcher | Node.js 런처
node ./launchers/gradient-launcher.js

# Development server | 개발 서버
npm run dev

# Production build | 프로덕션 빌드  
npm run build

# Preview production build | 프로덕션 빌드 미리보기
npm run preview

# Lint code | 코드 검사
npm run lint

• Frontend: React 19+ with Hooks
• Build Tool: Vite 7+ for fast development
• Styling: Pure CSS with CSS Grid and Flexbox
• Canvas: HTML5 Canvas API for rendering
• Color Picker: react-color for advanced color selection
• File Export: file-saver for PNG downloads
• Development: ESLint for code quality

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

react-gradient-generator/
├── src/
│   ├── components/          # React components | React 컴포넌트
│   │   ├── ColorPicker.jsx     # Color selection component
│   │   ├── DirectionSelector.jsx # Gradient direction controls  
│   │   ├── GradientPreview.jsx   # Canvas preview component
│   │   ├── ShapeSelector.jsx     # Shape selection controls
│   │   ├── SizeController.jsx    # Size adjustment controls
│   │   └── DownloadButton.jsx    # PNG export functionality
│   ├── hooks/               # Custom React hooks | 커스텀 React 훅
│   │   └── useGradient.js      # Gradient state management
│   ├── utils/               # Utility functions | 유틸리티 함수
│   │   └── gradientGenerator.js # Canvas gradient creation
│   ├── App.jsx              # Main application component
│   └── main.jsx             # Application entry point
├── launchers/               # Platform-specific launchers | 플랫폼별 실행기
├── public/                  # Static assets | 정적 자산
└── screenshots/             # Demo images | 데모 이미지

1. Select Colors | 색상 선택

   • Choose start color using the color picker
   • Select end color for gradient transition
   • Colors support HSL, RGB, and HEX formats

2. Choose Shape | 도형 선택

   • Rectangle: Standard gradient canvas
   • Square: Constrained to equal dimensions
   • Circle: Circular gradient shape

3. Set Direction | 방향 설정

   • Linear gradients: Horizontal, Vertical, Diagonal
   • Radial gradients: Center-outward pattern

4. Adjust Size | 크기 조정

   • Use sliders to set width (100-800px)
   • Adjust height (100-600px)
   • Preview updates in real-time

5. Export | 내보내기

   • Click "PNG 다운로드" to save
   • Files exported at 2x resolution for quality
   • Automatic filename with timestamp

All launcher scripts include intelligent features:

• Server Detection: Checks if development server is running
• Auto-start: Launches server if not detected
• Error Handling: Provides helpful error messages
• Browser Opening: Automatically opens default browser

모든 런처 스크립트는 지능형 기능을 포함합니다:

• 서버 감지: 개발 서버 실행 여부 확인
• 자동 시작: 감지되지 않으면 서버 실행
• 에러 처리: 도움이 되는 에러 메시지 제공
• 브라우저 열기: 기본 브라우저 자동 실행

The application follows a modular component structure:

애플리케이션은 모듈식 컴포넌트 구조를 따릅니다:

• App.jsx: Main container and state orchestration
• useGradient.js: Centralized state management hook
• Component isolation: Each UI element as separate component
• Prop drilling avoided: Direct hook consumption in components

High-performance gradient rendering with:

• Device Pixel Ratio: Automatic high-DPI display support
• Hardware Acceleration: Optimized Canvas API usage
• Memory Management: Efficient canvas cleanup
• Real-time Updates: Debounced rendering for smooth interaction

// useGradient hook structure
{
  startColor: '#ff6b6b',    // Start gradient color
  endColor: '#4ecdc4',      // End gradient color  
  direction: 'horizontal',   // Gradient direction
  shape: 'rectangle',       // Canvas shape
  size: { width: 400, height: 300 } // Canvas dimensions
}

1. Fork the repository | 저장소 포크
2. Create feature branch | 기능 브랜치 생성
3. Commit changes | 변경사항 커밋
4. Push to branch | 브랜치에 푸시
5. Create Pull Request | Pull Request 생성

MIT License - see LICENSE file for details

• React Color: For excellent color picker component
• Vite: For lightning-fast development experience
• File Saver: For seamless file download functionality

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📧 Contact: [your-email@example.com]

Made with ❤️ by [Your Name] | [Your Name]이 ❤️로 만들었습니다