--- title: "Gradient Generator CSS" description: "Une application web avancée pour créer, personnaliser, prévisualiser et exporter des dégradés CSS sophistiqués - avec génération par IA, ~980 presets et partage communautaire." locale: "fr" canonical: "https://portfolio.josedacosta.info/fr/realisations/gradient-generator-css" source: "https://portfolio.josedacosta.info/fr/realisations/gradient-generator-css.md" html_source: "https://portfolio.josedacosta.info/fr/realisations/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-04-23T15:41:30.382Z" --- # Gradient Generator CSS Une application web avancée pour créer, personnaliser, prévisualiser et exporter des dégradés CSS sophistiqués - avec génération par IA, ~980 presets et partage communautaire. **Date:** Janvier 2026 **Duration:** 3 jours **Role:** Développeur Solo, Designer & Architecte **Technologies:** Next.js 16, React 19, TypeScript, Tailwind CSS 4, Zustand, Prisma 7, SQLite, OpenAI API, shadcn/ui, IndexedDB ### Key Metrics - Lignes de code: **-** - TypeScript + React + Prisma - Composants React: **-** - 87 personnalisés + 55 shadcn/ui - Presets de dégradés: **-** - En 10 catégories, 80+ sous-catégories - Mockups d'appareils: **-** - iPhone, MacBook, iPad, navigateurs... ## Présentation du Projet _Ce qu'est Gradient Generator et pourquoi il existe_ - **Gradient Generator** est une application web conçue pour les designers, développeurs front-end et créatifs qui ont besoin de générer rapidement des dégradés CSS sophistiqués. L'outil supporte les **dégradés linéaires, radiaux, coniques et mesh** avec prévisualisation en temps réel, une bibliothèque riche de ~980 presets et l'export multi-format (CSS, SVG, PNG, JPEG). - Contrairement aux outils existants (cssgradient.io, webgradients.com), ce projet repousse les limites avec un **système de calques avec modes de fusion**, une **génération par IA** via OpenAI, des **prévisualisations sur mockups d'appareils** et une **plateforme de partage communautaire** avec likes, forks et découverte. Il supporte **11 espaces d'interpolation de couleurs CSS** incluant les standards de pointe OKLab et OKLCH. - Éditeur interactif avec panneaux redimensionnables et prévisualisation en temps réel - Color picker avancé avec support HEX, RGB, HSL et opacité - Système de calques avec modes de fusion et opacité par calque - Génération de dégradés par IA à partir de descriptions textuelles (OpenAI) - 20+ mockups d'appareils pour prévisualiser les dégradés en contexte - Effets visuels : grain, vignette, fondu, animations CSS **Gradient Type Linear:** Imagine une ligne tracée sur la surface dans une direction choisie (par exemple de gauche à droite). Pour chaque point, on mesure sa position le long de cette ligne : plus on est proche du début, plus on prend la première couleur ; plus on est proche de la fin, plus on prend la dernière. Tous les points sur une bande perpendiculaire partagent la même teinte. **Gradient Type Radial:** On choisit un point central. Pour chaque point de la surface, on mesure sa distance à ce centre. Plus on est proche, plus on prend la première couleur ; plus on est loin, plus on prend la dernière. Tous les points à distance égale (un cercle autour du centre) partagent la même teinte. **Gradient Type Conic:** On choisit un centre et une direction de départ. Pour chaque point, on mesure l'angle formé avec cette direction autour du centre. En tournant, la couleur change avec l'angle : 0° donne la première couleur, et 360° revient dessus. Le résultat ressemble à une roue chromatique ou à un cadran d'horloge. **Gradient Type Mesh:** On place plusieurs points colorés librement sur la surface. Pour chaque pixel, la couleur finale est un mélange pondéré de tous les points : plus un point est proche, plus il pèse dans le mélange. Sans suivre une ligne ni un cercle, les couleurs se fondent fluidement, comme des taches d'aquarelle qui se touchent. ## Objectifs, Contexte & Risques _La vision stratégique derrière le projet_ ### Obj Ux Interface fluide, réactive et visuellement soignée ### Obj Coverage Linéaire, radial, conique et mesh ### Obj Presets Organisés en 10 catégories, 80+ sous-catégories ### Obj Ai Générer des dégradés à partir de descriptions textuelles ### Obj Export CSS, SVG, PNG, JPEG **Objectives Intro:** Le projet était porté par des objectifs clairs et ambitieux : **Obj Ux Label:** UX Intuitive **Obj Ux Value:** Qualité designer **Obj Coverage Label:** Couverture dégradés **Obj Coverage Value:** 4 types **Obj Presets Label:** Bibliothèque de presets **Obj Presets Value:** ~980 **Obj Ai Label:** Intégration IA **Obj Ai Value:** LLM **Obj Export Label:** Formats d'export **Obj Export Value:** 4 formats **Context Text:** Ce projet personnel a été conçu à la fois comme un **outil de productivité pour designers** et une **démonstration portfolio** de la maîtrise des stacks web les plus récentes. José DA COSTA a mené le projet de bout en bout en tant qu'**architecte, product owner et réviseur technique**. **Stakes Text:** Le projet devait se **différencier des outils existants** par la complétude (mesh gradients, calques, IA, mockups, communauté) et la qualité visuelle. La performance était critique : l'éditeur devait rester fluide avec des dégradés multi-calques complexes, des effets en temps réel et des animations sans aucun lag. **Risk1 Title:** Complexité de la gestion d'état **Risk1 Desc:** 8 stores Zustand interconnectés gérant gradient, calques, historique, prévisualisation, sélections, dégradés sauvegardés, communauté et presets. **Risk2 Title:** Compatibilité navigateurs **Risk2 Desc:** Les mesh gradients et les espaces d'interpolation modernes (OKLab, OKLCH) ont un support navigateur limité. **Risk3 Title:** Dépendance à OpenAI **Risk3 Desc:** La fonctionnalité de génération IA repose entièrement sur un fournisseur LLM tiers pour la conversion texte-vers-dégradé. **Risk4 Title:** Absence de tests **Risk4 Desc:** Zéro fichier de test découvert - un risque de régression important pour 142 composants et 12 endpoints API. ## Les Étapes de Réalisation _Un parcours chronologique de 3 jours de développement intensif_ - Phase 1 - Phase 2 - Phase 3 - Phase 4 **Phase1 Title:** Fondations **Phase1 Period:** 22 janvier 2026 **Phase2 Title:** Enrichissement fonctionnel **Phase2 Period:** 23 janvier 2026 **Phase3 Title:** IA & Communauté **Phase3 Period:** 24 janvier 2026 **Phase4 Title:** Finitions **Phase4 Period:** 25 janvier 2026 ## Les Acteurs & Interactions _L'écosystème humain et technologique_ - Il s'agit d'un **projet solo** conçu, désigné et livré par José DA COSTA. Le développement a suivi un **workflow "human-in-the-loop"** : spécification et décisions architecturales par le développeur, génération de code assistée par IA, et revue manuelle et validation de tout le code généré. - Avant tout développement, le projet a traversé une phase dédiée d'**idéation et d'analyse concurrentielle** pour identifier les différenciateurs et prioriser les fonctionnalités. **Table Source:** Source **Table Lines:** Lignes **Table Percent:** % du total **Table Detail:** Détail **Ext Deps Text:** Les intégrations externes clés incluent une **API LLM tierce** (pour la génération de dégradés par IA), **Radix UI** (25 composants primitifs via shadcn/ui), **html2canvas** (export d'images) et **idb** (abstraction IndexedDB pour la persistance locale). ## Les Résultats _Résultats mesurables pour le projet et pour la croissance personnelle_ ### Metric Features Ensemble complet en 3 jours ### Metric Presets 10 catégories, 80+ sous-catégories ### Metric Color Spaces Dont OKLab, OKLCH, Display-P3 ### Metric Api 7 GET + 5 POST ### Metric Db Author, PublicGradient, Like ### Metric Deps 54 production + 12 développement - **Maîtrise React/Next.js moderne** - expérience pratique avec les toutes dernières versions (Next.js 16, React 19) et leurs nouveaux patterns - **Expertise CSS avancée** - compréhension profonde des **spécifications modernes de dégradés CSS**, **espaces d'interpolation (OKLab/OKLCH)** et **mesh gradients** - **Gestion d'état complexe** - **architecture de 8 stores Zustand interconnectés avec persistance**, undo/redo et coordination inter-stores - **Patterns d'intégration IA** - **prompt engineering** structuré pour la génération de contenu créatif, parsing des réponses OpenAI en structures typées - **Prototypage rapide avec assistance IA** - validation qu'une application complexe et riche peut être construite en 3 jours avec le développement augmenté par IA - **Création de design system** - construction d'un système complet de tokens CSS avec thèmes éditeur/site/partage supportant les modes sombre et clair **For Product:** Pour le produit **Metric Features:** Fonctionnalités livrées **Metric Features Value:** 20 **Metric Presets:** Presets de dégradés **Metric Presets Value:** ~980 **Metric Color Spaces:** Espaces de couleurs **Metric Color Spaces Value:** 11 **Metric Api:** Endpoints API **Metric Api Value:** 12 **Metric Db:** Tables en base **Metric Db Value:** 3 **Metric Deps:** Dépendances **Metric Deps Value:** 66 **For Me:** Pour moi **For Me Text:** Ce projet a renforcé et élargi plusieurs compétences clés : ## Les Lendemains du Projet _La vie après le sprint de développement initial_ **Immediate Text:** L'application était **fonctionnelle en local** après 3 jours de développement. Cependant, plusieurs éléments manquaient pour un lancement en production : une stratégie de base de données robuste (SQLite est insuffisant pour les accès concurrents d'une plateforme communautaire), une couverture de tests adéquate et des pipelines CI/CD. **Maintenance Text:** Le projet a rempli son objectif principal en tant que **pièce de démonstration portfolio**, montrant la capacité à construire une application complexe et riche en fonctionnalités rapidement. Les ~980 presets et la génération IA représentent une propriété intellectuelle réutilisable qui pourrait être extraite en bibliothèques autonomes ou intégrée dans d'autres outils de design. **Current Text:** Le projet est **fonctionnel en local** mais non déployé en production. Il reste une démonstration convaincante de ce que les outils de développement web modernes et le codage assisté par IA peuvent accomplir dans un délai extrêmement compressé. L'architecture et les patterns établis (composants feature-driven, multi-store Zustand, backend communautaire Prisma + SQLite) fournissent une base solide pour un futur déploiement en production. ## Mon Regard Critique _Une analyse rétrospective honnête_ - **L'outillage moderne maximise la productivité** - shadcn/ui, Zustand, Prisma et Next.js App Router éliminent le boilerplate et permettent de se concentrer sur la logique métier - **L'architecture feature-driven passe à l'échelle** - organiser par fonctionnalité (color-picker, mockups, presets, layers) maintient chaque module autonome et maintenable - **Le typage fort est un investissement** - le fichier de 479 lignes de types semble coûteux mais prévient des catégories entières de bugs dans l'application - **Les outils riches en contenu gagnent les utilisateurs** - les ~980 presets rendent l'outil immédiatement utile, prouvant que le contenu pré-construit a autant de valeur que l'éditeur lui-même **Would Change:** Ce que j'aurais fait différemment **Would Change Text:** Avec le recul, plusieurs approches seraient améliorées :