Gradient Generator CSS
An advanced web application for creating, customizing, previewing and exporting sophisticated CSS gradients - featuring AI-powered generation, ~980 presets, and community sharing.
Lines of Code
51,186
TypeScript + React + Prisma
React Components
142
87 custom + 55 shadcn/ui
Gradient Presets
~980
In 10 categories, 80+ subcategories
Device Mockups
20+
iPhone, MacBook, iPad, browsers...
Project Overview
What Gradient Generator is and why it exists
Gradient Generator is a web application designed for designers, front-end developers, and creatives who need to quickly generate sophisticated CSS gradients. The tool supports linear, radial, conic, and mesh gradients with real-time preview, a rich library of ~980 presets, and multi-format export (CSS, SVG, PNG, JPEG).
Unlike existing tools (cssgradient.io, webgradients.com), this project pushes the boundaries with a layer system with blend modes, AI-powered gradient generation via OpenAI, device mockup previews, and a community sharing platform with likes, forks, and discovery. It supports 11 CSS color interpolation spaces including the cutting-edge OKLab and OKLCH standards.
Linear
Imagine a line drawn across the surface in a chosen direction (for example, left to right). For each point, we measure its position along that line: the closer to the start, the closer to the first color; the closer to the end, the closer to the last. All points on a perpendicular stripe share the same shade.
Radial
Pick a center point. For each point on the surface, we measure its distance to that center. The closer you are, the closer to the first color; the farther, the closer to the last. All points at equal distance (a circle around the center) share the same shade.
Conic
Pick a center and a starting direction. For each point, we measure the angle formed with that direction around the center. Turning around, the color changes with the angle: 0 degrees gives the first color, and 360 degrees comes back to it. The result looks like a color wheel or a clock face.
Mesh
Place several colored points freely on the surface. For each pixel, the final color is a weighted mix of every point, where closer points weigh more. Without following a single line or circle, the colors blend fluidly, like watercolor stains touching each other.
Objectives, Context & Risks
The strategic vision behind the project
Intuitive UX
Designer-grade
Fluid, responsive, and visually polished interface
Gradient Coverage
4 types
Linear, radial, conic, and mesh
Preset Library
~980
Organized in 10 categories, 80+ subcategories
AI Integration
LLM
Generate gradients from text descriptions
Export Formats
4 formats
CSS, SVG, PNG, JPEG
This personal project was conceived as both a productivity tool for designers and a portfolio demonstration of modern web stack expertise. José DA COSTA led the project end-to-end as architect, product owner, and technical reviewer.
The project needed to differentiate itself from existing tools through completeness (mesh gradients, layers, AI, mockups, community) and visual quality. Performance was critical: the editor had to remain fluid with complex multi-layer gradients, real-time effects, and animations without any lag.
State Management Complexity
8 interconnected Zustand stores managing gradient, layers, history, preview, selections, saved gradients, community, and presets.
Browser Compatibility
Mesh gradients and modern color interpolation spaces (OKLab, OKLCH) have limited browser support.
OpenAI Dependency
AI generation feature relies entirely on a third-party LLM provider for text-to-gradient conversion.
No Test Coverage
Zero test files discovered - a significant regression risk for 142 components and 12 API endpoints.
Implementation Phases
A chronological walkthrough of 3 days of intensive development
- I scaffolded the Next.js 16 project with App Router, TypeScript strict mode and Tailwind CSS 4
- On the state layer, I set up the Zustand store architecture for gradient, layers and history management
- I implemented the interactive gradient editor with linear, radial and conic support
- For color selection, I built an advanced color picker with HEX/RGB/HSL input and a 2D color zone
- On the persistence side, I leveraged the idb library to store gradients locally in IndexedDB
- I built the full ~980-preset gradient library covering a wide range of visual styles
- On the rendering side, I implemented the visual effects engine: grain, vignette, fade and blend modes
- To fine-tune every gradient, I added color adjustments (brightness, saturation, contrast, hue rotation)
- I created the multi-format export module: CSS, SVG, PNG (via html2canvas) and JPEG
- In parallel, I produced 20+ device mockup components (iPhone 15 Pro, MacBook, iPad, iMac, browsers)
- On the AI side, I integrated a third-party LLM API for text-to-gradient generation with structured prompts
- I implemented mesh gradient support with multi-point color distribution
- On the community side, I built the "Explore" section with Prisma + SQLite (publish, like, fork, view)
- To compose gradients, I designed the layer system with blend modes, opacity control and reordering
- On the modern CSS front, I added the 11 color interpolation spaces (sRGB, OKLab, OKLCH, Lab, LCH, etc.)
- I built the static pages: Contact, Privacy, Terms, Copyright, Changelog
- On the homepage, I designed the animated hero section with community highlights
- I implemented the CSS animations: rotation, color shift, movement and glow effects
- Across every responsive breakpoint, I hunted down and fixed alignment and overflow bugs
- To finish, I configured the PWA manifest to enable standalone installation
Actors & Interactions
How I orchestrated the human and technological ecosystem
I ran this solo project from conception to delivery. I adopted a "human-in-the-loop" workflow: I wrote the specifications and architectural decisions, I drove the AI-assisted code generation, then I manually reviewed and validated every piece of generated code.
Before writing a single line, I went through a dedicated phase of ideation and competitive analysis to pin down differentiators and prioritize the feature set.
Results
Measurable outcomes for the project and for personal growth
Features Delivered
20
Complete feature set in 3 days
Gradient Presets
~980
10 categories, 80+ subcategories
Color Spaces
11
Including OKLab, OKLCH, Display-P3
API Endpoints
12
7 GET + 5 POST
DB Tables
3
Author, PublicGradient, Like
Dependencies
66
54 production + 12 development
This project reinforced and expanded several key competencies, and changed the way I work:
- Modern React/Next.js mastery - I got hands-on with the absolute latest versions (Next.js 16, React 19) and their newest patterns in a real production context.
- Advanced CSS expertise - I went deep on modern CSS gradient specifications, color interpolation spaces (OKLab/OKLCH) and mesh gradients.
- Complex state management - I architected 8 interconnected Zustand stores with persistence, undo/redo and cross-store coordination.
- AI integration patterns - I structured prompt engineering for creative content generation and parsed LLM responses into typed data structures.
- Rapid prototyping with AI assistance - I proved in practice that a complex, feature-rich application can be shipped in 3 days with AI-augmented development. This project changed the way I work: I now think in very short AI-driven iteration cycles while keeping ownership of the architecture and the review.
- Design system creation - I built a complete CSS token system with editor/site/shared themes supporting dark and light modes.
What Came After
Life beyond the initial development sprint
The application was functional locally after 3 days of development. However, several elements were missing for a production launch: a robust database strategy (SQLite is insufficient for concurrent access in a community platform), proper test coverage, and CI/CD pipelines.
Critical Reflection
How I judge this project with hindsight
- I shipped exceptional feature richness for a 3-day project - editor, layers, AI, mockups, community, presets.
- On the stack side, I built on bleeding-edge tech: Next.js 16, React 19, Tailwind CSS 4, Prisma 7 - all latest versions.
- I invested in an exhaustive TypeScript type system (479 lines for gradient types alone), which gave me excellent safety.
- With ~980 presets, I delivered immediate value to users - they can start creating without learning the interface.
- I shipped zero test coverage - no unit, integration or E2E tests for a 51K-line codebase.
- I chose SQLite, which turned out to be inadequate for production community features (concurrent access, scalability).
- I configured no CI/CD pipeline - so no automated quality gates.
- Feature-driven architecture scales - by organizing by feature (color-picker, mockups, presets, layers), I kept each module autonomous and maintainable.
- Strong typing is an investment - I saw that the 479-line type file, which looks costly, prevents entire categories of bugs across the application.
Architecture
Related journey
Professional experience linked to this achievement
Skills applied
Technical and soft skills applied
Hard Skills
Software & System Architecture
Architected 8 interconnected Zustand stores, feature-driven component structure, and dual-storage backend
Fullstack Development
Built complete SPA with Next.js 16, React 19, Zustand, Prisma 7, and OpenAI API integration
UI Design & UX Design
Soft Skills
Problem Solving & Adaptability
Delivered 51K-line application in 3 days using AI-augmented development workflow, Complex state management with 8 stores, real-time gradient rendering, and browser compatibility challenges
Innovation & Technology Watch
Image gallery
Project screenshots and visuals
Need an interactive web tool launched?
I created Gradient Generator, the web tool for designers and developers: CSS/SVG multi-format export, advanced customization and optimized UX. Let's talk about your context.
Contact me