--- title: "Gradient Generator CSS" description: "An advanced web application for creating, customizing, previewing and exporting sophisticated CSS gradients - featuring AI-powered generation, ~980 presets, and community sharing." locale: "en" canonical: "https://portfolio.josedacosta.net/en/achievements/gradient-generator-css" source: "https://portfolio.josedacosta.net/en/achievements/gradient-generator-css.md" html_source: "https://portfolio.josedacosta.net/en/achievements/gradient-generator-css" author: "José DA COSTA" date: "2026" type: "achievement" slug: "gradient-generator-css" tags: ["Next.js 16", "React 19", "TypeScript", "Tailwind CSS 4", "Zustand", "Prisma 7", "SQLite", "OpenAI API", "shadcn/ui", "IndexedDB"] generated_at: "2026-06-02T15:39:59.870Z" --- # 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. **Date:** January 2026 **Duration:** 3 days **Role:** Solo Developer, Designer & Architect **Technologies:** Next.js 16, React 19, TypeScript, Tailwind CSS 4, Zustand, Prisma 7, SQLite, OpenAI API, shadcn/ui, IndexedDB ### Key Metrics - Lines of Code: **-** - TypeScript + React + Prisma - React Components: **-** - 87 custom + 55 shadcn/ui - Gradient Presets: **-** - In 10 categories, 80+ subcategories - Device Mockups: **-** - iPhone, MacBook, iPad, browsers... ## Project Overview _What Gradient Generator is and why it exists_ ### Supported Gradient Types ### Key Features - **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. ### Advanced color picker with HEX, RGB, HSL and opacity support - Interactive editor with resizable panels and real-time preview - Advanced color picker with HEX, RGB, HSL and opacity support - Layer system with blend modes and per-layer opacity - AI-powered gradient generation from text descriptions (OpenAI) - 20+ device mockups for previewing gradients in context - Visual effects: grain, vignette, fade, CSS animations 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. 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. 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. 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_ ### Fluid, responsive, and visually polished interface ### Linear, radial, conic, and mesh ### Organized in 10 categories, 80+ subcategories ### Generate gradients from text descriptions ### CSS, SVG, PNG, JPEG ### Context ### Stakes ### Identified Risks ### 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. The project was driven by clear, ambitious objectives: Intuitive UX ### Designer-grade Gradient Coverage ### 4 types Preset Library ### ~980 AI Integration ### LLM Export Formats ### 4 formats 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. ## Implementation Phases _A chronological walkthrough of 3 days of intensive development_ ### Foundations (Jan 22, 2026) - 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 ### Feature Enrichment (Jan 23, 2026) - 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) ### AI & Community (Jan 24, 2026) - 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.) ### Polish & Finishes (Jan 25, 2026) - 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 ### Development Timeline - Feature Delivery ### Features Delivered per Day ### Phase 1 - Phase 1 - Phase 2 - Phase 3 - Phase 4 ## Actors & Interactions _How I orchestrated the human and technological ecosystem_ ### Estimated Contribution Breakdown ### Quantitative Code Attribution ### External dependencies I interacted with - 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. ### Source ### Lines ### % of Total ### Detail To make the platform work, I integrated several external building blocks: a **third-party LLM API** (for AI-driven gradient generation), **Radix UI** (25 primitive components via shadcn/ui), **html2canvas** (image export) and **idb** (IndexedDB abstraction for local persistence). ## Results _Measurable outcomes for the project and for personal growth_ ### Codebase Metrics ### Features Delivered Complete feature set in 3 days ### Gradient Presets 10 categories, 80+ subcategories ### Color Spaces Including OKLab, OKLCH, Display-P3 ### API Endpoints 7 GET + 5 POST ### DB Tables Author, PublicGradient, Like ### Dependencies 54 production + 12 development ### File Distribution ### Presets by Category ### Feature Capabilities Radar - **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. ### For the Product ### 20 ### ~980 ### 11 ### 12 ### 3 ### 66 ### For Me - Skills Acquired & Reinforced Through This Project This project reinforced and expanded several key competencies, and changed the way I work: ## What Came After _Life beyond the initial development sprint_ ### Immediate Aftermath ### Medium Term ### Current State 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. The project served its primary purpose as a **portfolio demonstration piece**, showcasing the ability to build a complex, feature-rich application rapidly. The ~980 presets and the AI generation feature represent reusable intellectual property that could be extracted into standalone libraries or integrated into other design tools. The project is **functional locally** but not deployed in production. It remains a compelling demonstration of what modern web development tools and AI-assisted coding can achieve in an extremely compressed timeline. The architecture and patterns established (feature-driven components, multi-store Zustand, Prisma + SQLite community backend) provide a solid foundation for future production deployment. ## Critical Reflection _How I judge this project with hindsight_ ### Strengths - 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. ### Areas for Improvement - 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. ### The lasting lessons this project brought me - **Modern tooling maximizes productivity** - I saw first-hand how shadcn/ui, Zustand, Prisma and Next.js App Router eliminate boilerplate and let me focus on business logic. - **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. - **Content-rich tools win users** - with the ~980 presets, I proved that pre-built content is as valuable as the editor itself. ### What I would do differently With hindsight, here are the approaches I would improve: ### Additional context - Architecture - Application Architecture - Next.js 16 monolith with client/server separation via API Routes - Data Model - SQLite database with 3 tables, 7 indexes, and community features - Related Journey - ACCENSEO - Founder & CTO - Personal entrepreneurial venture where this project was developed as a design tool and portfolio piece. ## Skills applied _Technical and soft skills applied_ - **[Problem Solving & Adaptability](https://portfolio.josedacosta.net/en/skills/problem-solving-adaptability.md)** - 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 - **[Software & System Architecture](https://portfolio.josedacosta.net/en/skills/system-architecture-design.md)** - Architected 8 interconnected Zustand stores, feature-driven component structure, and dual-storage backend - **[Fullstack Development](https://portfolio.josedacosta.net/en/skills/fullstack-development.md)** - Built complete SPA with Next.js 16, React 19, Zustand, Prisma 7, and OpenAI API integration - **[UI Design & UX Design](https://portfolio.josedacosta.net/en/skills/ui-ux-design.md)** - Designed a visual creation tool for designers, gradient editor with real-time preview, ~980 curated presets, and a UX optimized for iteration speed - **[Innovation & Technology Watch](https://portfolio.josedacosta.net/en/skills/innovation-tech-watch.md)** - Integrated OpenAI for AI-assisted gradient suggestions, leveraged Next.js 16 / React 19 / Prisma 7, production use of bleeding-edge frameworks ## Related journey _Professional experience linked to this achievement_ - **ACCENSEO - CTO & Founder** - IT consulting and software company providing comprehensive services: custom software development, system integration, cloud infrastructure, database hosting, and technical advisory. Helping SMEs and mid-cap companies transform their IT systems into competitive advantages. ## 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**