Gradient Animation Studio — générateur de dégradés animés CSS & WebGL

◈ Type de dégradé
🎨 Couleurs
⚙️ Géométrie & animation
135°
0
8
70%
100%
✨ Finition
6%
20%
100%
100%
🧪 Diagnostic moteur
Auto-test : après le 1er rendu GPU les pixels sont relus ; si l'image est noire ou uniforme, le moteur bascule tout seul sur Canvas 2D.
…0 fps0×0—
0.00s
s
TIMELINE & KEYFRAMES
Clic sur une piste = ajouter un keyframe · glisser = déplacer · Alt+clic sur un losange = supprimer.
…
📚 Bibliothèque premium
💾 Mes presets
⤓ Export image & vidéo
Le WebM capture le canvas réel. Le GIF est encodé en local (LZW + palette adaptative), aucune donnée ne quitte le navigateur.
♿ Contraste & lisibilité
Ratio calculé sur la zone la plus claire et la plus sombre du rendu réel. WCAG AA : 4.5 (texte courant), 3.0 (grand texte).
⌨️ Raccourcis
Lecture / pauseEspace
Annuler / rétablirCtrl+Z / Ctrl+Maj+Z
Type suivant / précédent→ / ←
Palette aléatoireR
Keyframe au curseurK
PNG rapideP
Plein écranF
👁️ Aperçu en contexte

Votre titre en hero

Le dégradé en fond de section

Hero de landing page
Bouton / CTA

Texte dégradé

Texte (background-clip)
Carte / vignette
🧰 Les 54 outils Boostmark
❓ Questions fréquentes
Pourquoi mon dégradé WebGL restait noir en production ?

Trois causes classiques : un buffer de sommets rebindé à null entre deux passes (le drawArrays échoue silencieusement), un canvas mesuré à 0×0 parce que le conteneur n'est pas encore en page, et une perte de contexte GPU jamais restaurée. Ce studio corrige les trois : buffer explicite à chaque dessin, garde sur la taille, restauration automatique du contexte — et un auto-test qui relit les pixels pour basculer sur Canvas 2D si le GPU ne rend rien.

Le CSS exporté est-il identique à l'aperçu ?

Pour linear, radial et conic : oui, c'est du CSS natif pixel pour pixel. Pour mesh, aurora, liquid, neon et glass, le CSS est la meilleure approximation possible (superposition de radial-gradient animés) : pour un rendu identique à 100 %, exportez la vidéo WebM, le PNG ou le shader GLSL.

Les exports sont-ils libres de droits ?

Oui. Tout est généré dans votre navigateur, rien n'est envoyé sur un serveur. Les fichiers produits vous appartiennent, usage commercial inclus.

Comment réutiliser un dégradé plus tard ?

Bouton « 🔗 Partager » : l'état complet (type, couleurs, réglages, keyframes) est encodé dans l'URL. Ou « 💾 Enregistrer » pour le garder dans vos presets locaux, exportables en JSON.