Project Description

Every time I needed a CSS gradient, I found myself googling online tools, dealing with ads, and fighting cluttered interfaces. Gradify CSS was born from the simple desire to have my own custom tool that I can use instantly whenever I need it.

Beyond solving a personal need, building Gradify was also a learning exercise in creating polished and interactive UI tools with modern React patterns.

Key Features

Gradient Types

Support for all CSS gradient functions:

• Linear Gradients: With 360° visual angle selector
• Radial Gradients: Circular and elliptical with position control
• Conic Gradients: Angular gradients from a central point

Color Stop Editor

• Unlimited color stops: Add as many colors as you need
• Position control: Adjust each stop’s percentage precisely
• Visual editing: Drag and adjust directly on the gradient bar
• Color picker: Full color selection with hexadecimal input

Instant Code Export

• One-click copy: Get the CSS instantly
• Clean output: Production-ready code
• Real-time preview: See changes as you make them

Curated Presets

Over 15 hand-picked gradient presets organized by category:

• Sunset: Warm orange and pink tones
• Ocean: Cool blues and turquoises
• Nature: Greens and earth tones
• Neon: Vibrant high-contrast colors

User Experience

• Dark/Light theme: Persistent preference
• Bilingual: English and Spanish support
• Responsive: Works on any device
• History: Auto-save to localStorage
• Accessibility: Full keyboard navigation

Visual Design

The interface features a glassmorphic card design with animated SVG icons and dynamic accent colors that match the current gradient. This creates a cohesive experience where the tool itself showcases what it can produce.

Technical Architecture

Stack

• React 19 with modern hooks patterns
• TypeScript for type safety
• Vite 7 for fast development
• Tailwind CSS v4 for styling
• shadcn/ui for accessible components
• Zustand for state management
• Zod for validation
• react-i18next for internationalization

Project Structure

src/
├── components/
│   ├── animate-ui/     # Animated icons
│   ├── gradient/       # Gradient-specific components
│   └── layout/         # App structure
├── config/             # App configuration
├── i18n/               # Translations
├── stores/             # Zustand stores
└── utils/              # Helper functions

How It Works

1. Select gradient type: Linear, radial, or conic
2. Adjust parameters: Angle for linear, position for radial/conic
3. Edit color stops: Add colors and adjust positions
4. Real-time preview: See the gradient update instantly
5. Copy the CSS: One click to clipboard

Future Ideas

• Gradient animation generator
• CSS-in-JS output formats
• Gradient palette collections
• Share gradients via URL
• Browser extension for quick access