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 | λ°λͺ¨ μ΄λ―Έμ§
-
Select Colors | μμ μ ν
- Choose start color using the color picker
- Select end color for gradient transition
- Colors support HSL, RGB, and HEX formats
-
Choose Shape | λν μ ν
- Rectangle: Standard gradient canvas
- Square: Constrained to equal dimensions
- Circle: Circular gradient shape
-
Set Direction | λ°©ν₯ μ€μ
- Linear gradients: Horizontal, Vertical, Diagonal
- Radial gradients: Center-outward pattern
-
Adjust Size | ν¬κΈ° μ‘°μ
- Use sliders to set width (100-800px)
- Adjust height (100-600px)
- Preview updates in real-time
-
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
}
- Fork the repository | μ μ₯μ ν¬ν¬
- Create feature branch | κΈ°λ₯ λΈλμΉ μμ±
- Commit changes | λ³κ²½μ¬ν 컀λ°
- Push to branch | λΈλμΉμ νΈμ
- 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]μ΄ β€οΈλ‘ λ§λ€μμ΅λλ€