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.
Lignes de code
51 186
TypeScript + React + Prisma
Composants React
142
87 personnalisés + 55 shadcn/ui
Presets de dégradés
~980
En 10 catégories, 80+ sous-catégories
Mockups d'appareils
20+
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.
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.
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.
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.
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
UX Intuitive
Qualité designer
Interface fluide, réactive et visuellement soignée
Couverture dégradés
4 types
Linéaire, radial, conique et mesh
Bibliothèque de presets
~980
Organisés en 10 catégories, 80+ sous-catégories
Intégration IA
LLM
Générer des dégradés à partir de descriptions textuelles
Formats d'export
4 formats
CSS, SVG, PNG, JPEG
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.
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.
Les Étapes de Réalisation
Un parcours chronologique de 3 jours de développement intensif
- 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
- 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)
- 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.)
- 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
Les Acteurs & Interactions
Comment j'ai piloté l'écosystème humain et technologique
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.
Les Résultats
Résultats mesurables pour le projet et pour la croissance personnelle
Fonctionnalités livrées
20
Ensemble complet en 3 jours
Presets de dégradés
~980
10 catégories, 80+ sous-catégories
Espaces de couleurs
11
Dont OKLab, OKLCH, Display-P3
Endpoints API
12
7 GET + 5 POST
Tables en base
3
Author, PublicGradient, Like
Dépendances
66
54 production + 12 développement
Ce projet a renforcé et élargi plusieurs compétences clés, et a même changé ma façon de travailler :
- 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.
Les Lendemains du Projet
La vie après le sprint de développement initial
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.
Mon Regard Critique
Comment je juge ce projet avec le recul
- 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.
- 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.
- 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.
Architecture
Parcours associé
Expérience professionnelle liée à cette réalisation
Compétences mobilisées
Compétences techniques et humaines appliquées
Compétences techniques
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 developpeurs : export CSS/SVG multi-format, personnalisation avancee et UX optimisee. Parlons de votre contexte.
Contactez-moi