--- 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-05-26T15:40:29.961Z" --- # 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 **Durée:** 3 jours **Rôle:** Développeur Solo, Designer & Architecte **Technologies:** Next.js 16, React 19, TypeScript, Tailwind CSS 4, Zustand, Prisma 7, SQLite, OpenAI API, shadcn/ui, IndexedDB ### Indicateurs clés - 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_ ### Types de dégradés supportés ### Fonctionnalités Clés - **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. ### Color picker avancé avec support HEX, RGB, HSL et opacité - É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 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. 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. 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. 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_ ### Interface fluide, réactive et visuellement soignée ### Linéaire, radial, conique et mesh ### Organisés en 10 catégories, 80+ sous-catégories ### Générer des dégradés à partir de descriptions textuelles ### CSS, SVG, PNG, JPEG ### Contexte ### Enjeux ### Risques identifiés ### Complexité de la gestion d'état 8 stores Zustand interconnectés gérant gradient, calques, historique, prévisualisation, sélections, dégradés sauvegardés, communauté et presets. ### Compatibilité navigateurs Les mesh gradients et les espaces d'interpolation modernes (OKLab, OKLCH) ont un support navigateur limité. ### Dépendance à OpenAI La fonctionnalité de génération IA repose entièrement sur un fournisseur LLM tiers pour la conversion texte-vers-dégradé. ### Absence de tests Zéro fichier de test découvert - un risque de régression important pour 142 composants et 12 endpoints API. Le projet était porté par des objectifs clairs et ambitieux : UX Intuitive ### Qualité designer Couverture dégradés ### 4 types Bibliothèque de presets ### ~980 Intégration IA ### LLM Formats d'export ### 4 formats 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**. 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. ## Les Étapes de Réalisation _Un parcours chronologique de 3 jours de développement intensif_ ### Fondations (22 janvier 2026) - J'ai scaffoldé le projet Next.js 16 avec App Router, TypeScript en mode strict et Tailwind CSS 4 - Côté état applicatif, j'ai mis en place l'architecture de stores Zustand pour gradient, calques et historique - J'ai implémenté l'éditeur interactif avec support linéaire, radial et conique - Pour le choix des couleurs, j'ai construit un color picker avancé avec saisie HEX/RGB/HSL et zone 2D - Côté persistance locale, je me suis appuyé sur la bibliothèque idb pour stocker les dégradés en IndexedDB ### Enrichissement fonctionnel (23 janvier 2026) - J'ai construit la bibliothèque complète de ~980 presets, couvrant une large gamme de styles visuels - Côté rendu, j'ai implémenté le moteur d'effets visuels : grain, vignette, fondu et modes de fusion - Pour affiner chaque dégradé, j'ai ajouté les ajustements de couleur (luminosité, saturation, contraste, rotation de teinte) - J'ai créé le module d'export multi-format : CSS, SVG, PNG (via html2canvas) et JPEG - En parallèle, j'ai produit 20+ composants mockups d'appareils (iPhone 15 Pro, MacBook, iPad, iMac, navigateurs) ### IA & Communauté (24 janvier 2026) - Sur le volet IA, j'ai intégré une API LLM tierce pour la génération texte-vers-dégradé avec prompts structurés - J'ai implémenté le support mesh gradient avec distribution multi-points de couleurs - Côté communauté, j'ai construit la section "Explore" avec Prisma + SQLite (publication, likes, forks, vues) - Pour composer les dégradés, j'ai conçu le système de calques avec modes de fusion, contrôle d'opacité et réordonnancement - Sur le volet CSS moderne, j'ai ajouté les 11 espaces d'interpolation (sRGB, OKLab, OKLCH, Lab, LCH, etc.) ### Finitions (25 janvier 2026) - J'ai construit les pages statiques : Contact, Confidentialité, CGU, Copyright, Changelog - Côté accueil, j'ai designé la section hero animée avec mise en avant communautaire - J'ai implémenté les animations CSS : rotation, changement de couleur, mouvement et effets glow - Sur chaque breakpoint responsive, j'ai chassé et corrigé les bugs d'alignement et d'overflow - Pour finir, j'ai configuré le manifest PWA afin de permettre l'installation en mode standalone ### Chronologie de développement - Livraison des fonctionnalités ### Fonctionnalités livrées par jour ### Phase 1 - Phase 1 - Phase 2 - Phase 3 - Phase 4 ## Les Acteurs & Interactions _Comment j'ai piloté l'écosystème humain et technologique_ ### Répartition estimée des contributions ### Attribution quantitative du code ### Dépendances externes avec lesquelles j'ai interagi - J'ai mené ce **projet en solo**, de la conception à la livraison. J'ai adopté un **workflow "human-in-the-loop"** : je rédigeais la spécification et les décisions architecturales, je pilotais la génération de code assistée par IA, puis je relisais et validais manuellement tout le code généré. - Avant d'écrire la moindre ligne, j'ai traversé une phase dédiée d'**idéation et d'analyse concurrentielle** pour identifier les différenciateurs et prioriser les fonctionnalités. ### Source ### Lignes ### % du total ### Détail Pour faire fonctionner la plateforme, j'ai intégré plusieurs briques externes : 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_ ### Métriques du code ### Fonctionnalités livrées Ensemble complet en 3 jours ### Presets de dégradés 10 catégories, 80+ sous-catégories ### Espaces de couleurs Dont OKLab, OKLCH, Display-P3 ### Endpoints API 7 GET + 5 POST ### Tables en base Author, PublicGradient, Like ### Dépendances 54 production + 12 développement ### Distribution des fichiers ### Presets par catégorie ### Radar des capacités - **Maîtrise React/Next.js moderne** - j'ai pris en main les toutes dernières versions (Next.js 16, React 19) et leurs nouveaux patterns dans un contexte réel de production. - **Expertise CSS avancée** - je me suis approprié en profondeur les **spécifications modernes de dégradés CSS**, les **espaces d'interpolation (OKLab/OKLCH)** et les **mesh gradients**. - **Gestion d'état complexe** - j'ai architecturé **8 stores Zustand interconnectés avec persistance**, undo/redo et coordination inter-stores. - **Patterns d'intégration IA** - j'ai structuré du **prompt engineering** pour la génération de contenu créatif et parsé les réponses LLM en structures typées. - **Prototypage rapide avec assistance IA** - j'ai démontré en pratique qu'une application complexe et riche pouvait être livrée en 3 jours en exploitant le développement augmenté par IA. Ce projet a changé ma façon de travailler : je pense désormais en cycles d'itération très courts pilotés par l'IA, tout en gardant la main sur l'architecture et la revue. - **Création de design system** - j'ai construit un système complet de tokens CSS avec thèmes éditeur/site/partage supportant les modes sombre et clair. ### Pour le produit ### 20 ### ~980 ### 11 ### 12 ### 3 ### 66 Pour moi - Compétences acquises et renforcées grâce à ce projet Ce projet a renforcé et élargi plusieurs compétences clés, et a même changé ma façon de travailler : ## Les Lendemains du Projet _La vie après le sprint de développement initial_ ### Suites immédiates ### À moyen terme ### État actuel 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. 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. 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 _Comment je juge ce projet avec le recul_ ### Points forts - J'ai livré une richesse fonctionnelle exceptionnelle pour un projet de 3 jours - éditeur, calques, IA, mockups, communauté, presets. - Côté stack, j'ai bâti sur du bleeding-edge : Next.js 16, React 19, Tailwind CSS 4, Prisma 7 - toutes les dernières versions. - J'ai investi dans un système de types TypeScript exhaustif (479 lignes pour les types gradient) qui m'a offert une excellente sécurité. - Avec ~980 presets, j'ai offert une valeur immédiate aux utilisateurs - ils peuvent créer sans apprendre l'interface. ### Points d'amélioration - Je n'ai mis en place aucune couverture de tests - ni unitaire, ni d'intégration, ni E2E pour un codebase de 51K lignes. - J'ai choisi SQLite, qui s'avère inadéquat pour les fonctionnalités communautaires en production (accès concurrent, scalabilité). - Je n'ai configuré aucun pipeline CI/CD - donc aucune porte qualité automatisée. ### Les enseignements durables que ce projet m'a apportés - **L'outillage moderne maximise la productivité** - j'ai vu à quel point shadcn/ui, Zustand, Prisma et Next.js App Router éliminent le boilerplate et me laissent me concentrer sur la logique métier. - **L'architecture feature-driven passe à l'échelle** - en organisant par fonctionnalité (color-picker, mockups, presets, layers), j'ai gardé chaque module autonome et maintenable. - **Le typage fort est un investissement** - j'ai constaté que le fichier de 479 lignes de types, qui paraît coûteux, m'évite des catégories entières de bugs dans l'application. - **Les outils riches en contenu gagnent les utilisateurs** - avec les ~980 presets, j'ai prouvé que le contenu pré-construit a autant de valeur que l'éditeur lui-même. ### Ce que j'aurais fait différemment Avec le recul, voici les approches que j'améliorerais : ### Contexte additionnel - Architecture - Architecture de l'application - Monolithe Next.js 16 avec séparation client/serveur via les API Routes - Modèle de données - Base SQLite avec 3 tables, 7 index et fonctionnalités communautaires - Parcours associé - ACCENSEO - Fondateur & CTO - Aventure entrepreneuriale personnelle dans laquelle ce projet a été développé comme outil de design et pièce portfolio. ## Compétences mobilisées _Compétences techniques et humaines appliquées_ - **[Résolution de Problèmes & Adaptabilité](https://portfolio.josedacosta.info/fr/competences/resolution-de-problemes-adaptabilite.md)** - 51K lignes livrées en 3 jours en développement augmenté par IA. État complexe à 8 stores, rendu temps réel et compatibilité navigateur - **[Architecture Logicielle & Système](https://portfolio.josedacosta.info/fr/competences/architecture-logicielle-systeme.md)** - 8 stores Zustand interconnectés, structure feature-driven, double stockage - **[Développement Fullstack](https://portfolio.josedacosta.info/fr/competences/developpement-fullstack.md)** - SPA Next.js 16, React 19, Zustand, Prisma 7 et OpenAI - **[UI Design & UX Design](https://portfolio.josedacosta.info/fr/competences/ui-design-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 & Veille Technologique](https://portfolio.josedacosta.info/fr/competences/innovation-veille-technologique.md)** - Integrated OpenAI for AI-assisted gradient suggestions, leveraged Next.js 16 / React 19 / Prisma 7, production use of bleeding-edge frameworks ## Parcours associé _Expérience professionnelle liée à cette réalisation_ - **ACCENSEO - CTO & Fondateur** - Société de conseil et développement informatique offrant des services complets : développement logiciel sur mesure, intégration de systèmes, infrastructure cloud, hébergement de bases de données et conseil technique. Accompagnement des PME et ETI dans la transformation de leur SI en avantage concurrentiel. ## Galerie d'images _Captures et visuels du projet_ ## Vous avez un outil web interactif a lancer ? J'ai cree Gradient Generator, l'outil web pour designers et développeurs : export CSS/SVG multi-format, personnalisation avancee et UX optimisee. Parlons de votre contexte. **Contactez-moi**