Générateur de courbe de Bézier
NouveauConcevez une courbe d’accélération CSS en déplaçant les points de contrôle, avec un aperçu en direct.
Runs entirely in your browser. Nothing is uploaded.
Créez des courbes d'easing CSS visuellement
Ce générateur de cubic-bezier transforme la valeur abstraite cubic-bezier(x1, y1, x2, y2) en quelque chose que vous pouvez voir et ressentir. Faites glisser les deux poignées de contrôle sur le graphique pour façonner une courbe d'accélération, regardez un aperçu en direct se déplacer avec ce timing précis, puis copiez une valeur prête à l'emploi pour vos transitions et animations CSS. C'est un éditeur de courbes d'easing et un visualiseur de cubic-bezier complets en un seul, fonctionnant entièrement dans votre navigateur — sans installation, sans compte.
Chaque courbe va de (0,0) à (1,1). L'axe horizontal représente le temps et l'axe vertical le progrès, donc une courbe qui monte brusquement au début signifie un départ rapide, et une qui s'aplatit près de la fin signifie une fin en douceur. Saisissez des nombres précis dans les quatre entrées, faites glisser les poignées ou collez une valeur cubic-bezier() existante pour la charger et la régler. Le résultat se met à jour en temps réel à chaque déplacement d'une poignée.
Plus de 30 presets : mots-clés CSS et courbes d'easing nommées
La barre de presets combine les deux choses que les concurrents séparent habituellement. Vous obtenez les cinq mots-clés CSS — linear, ease, ease-in, ease-out et ease-in-out — ainsi que le catalogue complet des courbes d'easing nommées popularisées par easings.net : Sine, Quad, Cubic, Quart, Quint, Expo, Circ et Back, chacune dans les variantes In, Out et In-Out. Cela signifie que easeInOutCubic, easeOutQuart, easeOutBack et les autres sont à un clic, déjà convertis en valeur css cubic-bezier.
Chaque preset affiche une miniature de courbe pour que vous puissiez reconnaître sa forme d'un coup d'œil, puis la charge directement dans l'éditeur où vous pouvez la peaufiner. Easings.net ne liste que les noms et affiche des images statiques — vous ne pouvez pas modifier ni exporter depuis là. cubic-bezier.com affiche les cinq mots-clés CSS mais pas le jeu complet de Penner. Cet outil vous donne les deux, avec édition, en un seul endroit.
Dépassement, rebond et anticipation
Les valeurs y d'un cubic-bezier ne sont pas limitées à 0–1. Poussez une poignée au-dessus de la boîte et l'animation dépasse sa cible avant de se stabiliser — la sensation élastique de easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Tirez une poignée en dessous de la boîte et l'élément s'arme d'abord, comme un élan avant un saut. Le graphique de l'éditeur s'étend au-delà de la boîte unitaire pour que vous puissiez glisser dans ce territoire de dépassement et prévisualiser le résultat instantanément.
Chrome DevTools dispose d'un éditeur cubic-bezier intégré, mais bloque les poignées dans la boîte 0–1, donc vous ne pouvez pas créer d'effets de dépassement ou d'anticipation. Firefox DevTools a la même limitation. Les deux manquent également du catalogue de presets nommés et des options d'exportation disponibles ici. Si vous avez besoin de dépassement, c'est l'un des rares outils qui le prend réellement en charge.
Comment il se compare aux autres outils cubic-bezier
cubic-bezier.com de Lea Verou est la référence qui a popularisé le format glisser-aperçu, et il reste excellent pour la génération rapide de courbes CSS. Mais il n'a pas d'export GSAP, ne génère pas de fonctions d'easing JavaScript, n'a pas de mode comparaison, pas de bibliothèque de presets Penner, et l'interface se casse sur mobile. Easings.net est une référence en lecture seule — vous choisissez une courbe nommée et il affiche les valeurs, mais il n'y a pas d'éditeur et rien à régler.
Chrome et Firefox DevTools incluent chacun un éditeur cubic-bezier léger dans l'inspecteur du navigateur, ce qui est pratique quand vous êtes déjà dans DevTools. La contrepartie : vous ne pouvez pas les utiliser sans DevTools ouvert, ils bloquent les poignées à 0–1 (pas de dépassement), ne peuvent pas exporter du code GSAP ou JS, et ne fonctionnent pas sur mobile. Le générateur d'UtiloKit combine l'éditeur interactif, la bibliothèque de presets, l'outil de comparaison et trois formats d'export sur une seule page qui fonctionne sur n'importe quel appareil.
Aperçu en direct et comparaison côte à côte
Appuyez sur play et un élément de démonstration boucle avec votre courbe pour que vous jugiez le mouvement, pas seulement les chiffres. Changez la démo entre translate, scale et opacity et ajustez la durée pour correspondre à votre animation réelle. Activez Comparer pour placer une deuxième courbe à côté de la première — parfait pour choisir la bonne fonction de temporisation de transition avant de la valider en production.
Le curseur de durée contrôle la vitesse d'aperçu de 200ms à 3 secondes, pour tester comment la même courbe se ressent à différentes vitesses. Un aperçu au ralenti révèle souvent des problèmes — comme un accrochage au début — qui sont invisibles à 300ms. La plupart des autres outils, dont cubic-bezier.com, n'offrent qu'un aperçu à vitesse fixe et ne proposent pas de comparaison côte à côte.
Exportez vers CSS, GSAP et JavaScript — gratuitement
Copiez ce dont votre stack a besoin. L'onglet CSS vous donne à la fois un raccourci transition en une ligne et un bloc d'animation @keyframes complet. L'onglet GSAP génère un appel CustomEase.create() pour que votre animation GSAP corresponde exactement à la courbe. L'onglet JS génère une fonction d'easing javascript cubic-bezier autonome — un solveur Newton-Raphson que vous pouvez intégrer dans requestAnimationFrame ou n'importe quel tween sans dépendances.
Vous avez trouvé une courbe qui vous plaît ? Partagez-la. L'outil encode les quatre valeurs dans l'URL de la page, donc un lien reproduit votre easing exact sur n'importe quel appareil. Tout fonctionne dans votre navigateur — rien n'est téléchargé, stocké ou enregistré — et c'est entièrement gratuit sans inscription.
Frequently asked questions
Qu'est-ce que cubic-bezier en CSS ?
cubic-bezier() est une fonction d'easing (temporisation) définie par une courbe de Bézier. On l'écrit cubic-bezier(x1, y1, x2, y2) dans transition-timing-function ou animation-timing-function, et ses deux points de contrôle courbent la trajectoire pour qu'une animation accélère et décélère plutôt que de se déplacer à vitesse constante. Par exemple, cubic-bezier(0.25, 0.1, 0.25, 1) est exactement le même easing que le mot-clé CSS 'ease'.
Comment fonctionnent les quatre valeurs du cubic-bezier ?
cubic-bezier(x1, y1, x2, y2) définit deux points de contrôle : P1 = (x1, y1) tire le début de la courbe et P2 = (x2, y2) tire la fin. La courbe elle-même commence toujours en (0,0) et se termine en (1,1). Les valeurs x représentent le temps et doivent rester entre 0 et 1 ; les valeurs y représentent la progression et peuvent descendre en dessous de 0 ou monter au-dessus de 1 pour des effets de dépassement. Faites glisser les deux poignées sur le graphique et les quatre nombres se mettent à jour en direct.
Quelle est la différence entre ease, ease-in, ease-out et ease-in-out ?
linear se déplace à vitesse constante sans easing — cela paraît artificiel pour la plupart des interfaces. ease — le défaut CSS — démarre un peu vite puis ralentit. ease-in démarre lentement et accélère vers la fin, ce qui ressemble souvent à quelque chose qui tombe. ease-out démarre vite et décélère, ce qui paraît généralement le plus naturel pour les éléments apparaissant à l'écran. ease-in-out est lent aux deux extrémités et le plus rapide au milieu, idéal pour des éléments qui traversent l'écran et doivent s'arrêter en douceur.
Les valeurs y du cubic-bezier peuvent-elles dépasser 1 ou descendre sous 0 ?
Les valeurs y le peuvent, et c'est ainsi qu'on obtient des effets de dépassement et d'anticipation. Les valeurs x (temps) sont toujours limitées à 0–1, mais un y supérieur à 1 fait dépasser l'élément sa cible avant de revenir — comme un ressort — tandis qu'un y inférieur à 0 le fait reculer d'abord. Un exemple classique est easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Cet éditeur vous permet de faire glisser les poignées en dehors de la boîte 0–1.
Comment utiliser cubic-bezier dans une transition ou animation CSS ?
Placez-le dans le slot de la fonction de temporisation. Pour une transition : transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Pour une animation par keyframes : animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. L'onglet CSS de cet outil génère automatiquement les deux extraits avec votre courbe et durée actuelles, pour les copier-coller directement dans votre feuille de style.
Comment convertir un easing nommé comme easeInOutQuad en cubic-bezier ?
Chargez-le depuis le catalogue de presets — les courbes de Penner / easings.net ont toutes des approximations cubic-bezier standard. Par exemple easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1) et easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). Choisissez la courbe dans la galerie et copiez la valeur directement dans votre CSS.
Ce générateur de cubic-bezier est-il gratuit et privé ?
Entièrement gratuit, sans inscription et sans rien envoyer nulle part. L'éditeur de courbes, l'aperçu en direct et les exports CSS, GSAP et JavaScript fonctionnent localement dans votre navigateur. Rien de ce que vous créez n'est envoyé à un serveur, donc votre travail reste entièrement sur votre appareil. Vous pouvez aussi partager une courbe via un lien qui encode les quatre valeurs dans l'URL — sans compte nécessaire.
Related tools
Voir tous les outils
Nouveau Mélangeur de couleurs
Mélangez deux couleurs à n’importe quel ratio et copiez le résultat ou n’importe quelle étape.
Nouveau Pipette à couleurs d’image
Choisissez n’importe quelle couleur d’une image et extrayez sa palette dominante en HEX, RGB et HSL.
Nouveau Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nouveau Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Sélecteur et convertisseur de couleur
Choisissez une couleur et convertissez-la entre HEX, RGB, HSL et OKLCH.
Nouveau Vérificateur de contraste de couleur
Vérifiez les rapports de contraste WCAG AA/AAA entre les couleurs de texte et d’arrière-plan.