Generatore di curve di Bézier
NovitàProgetta una curva di easing CSS trascinando i punti di controllo, con anteprima in tempo reale.
Runs entirely in your browser. Nothing is uploaded.
Progetta curve di easing CSS visivamente
Questo generatore di cubic-bezier trasforma il valore astratto cubic-bezier(x1, y1, x2, y2) in qualcosa che puoi vedere e sentire. Trascina i due cursori dei punti di controllo sul grafico per dare forma a una curva di accelerazione, guarda un'anteprima dal vivo che si muove con quel preciso timing, poi copia un valore pronto da usare per le tue transizioni e animazioni CSS. È un completo editor di curve di easing e visualizzatore di cubic-bezier in uno, che funziona interamente nel tuo browser — senza installazione, senza account.
Ogni curva va da (0,0) a (1,1). L'asse orizzontale è il tempo e l'asse verticale è il progresso, quindi una curva che sale bruscamente all'inizio significa un avvio veloce, e una che si appiattisce vicino alla fine significa una conclusione morbida. Digita numeri precisi nei quattro campi, trascina i cursori o incolla un valore cubic-bezier() esistente per caricarlo e regolarlo. Il risultato si aggiorna in tempo reale a ogni movimento del cursore.
Oltre 30 preset: parole chiave CSS e curve di easing con nome
La barra dei preset combina le due cose che i concorrenti di solito separano. Ottieni le cinque parole chiave CSS — linear, ease, ease-in, ease-out ed ease-in-out — più il catalogo completo delle curve di easing con nome rese popolari da easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ e Back, ognuna nelle varianti In, Out e In-Out. Ciò significa che easeInOutCubic, easeOutQuart, easeOutBack e gli altri sono a un clic, già convertiti in un valore css cubic-bezier.
Ogni preset mostra una piccola anteprima della curva per riconoscerne la forma a colpo d'occhio, poi la carica direttamente nell'editor dove puoi affinarla. Easings.net elenca solo i nomi e mostra immagini statiche — non è possibile modificare né esportare da lì. cubic-bezier.com mostra le cinque parole chiave CSS ma non il set completo di Penner. Questo strumento ti dà entrambe le cose, con modifica, in un unico posto.
Overshoot, rimbalzo e anticipazione
I valori y di un cubic-bezier non sono limitati a 0–1. Spinge un cursore sopra il riquadro e l'animazione supera il suo obiettivo prima di assestarsi — la sensazione elastica di easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Trascina un cursore sotto il riquadro e l'elemento si prepara prima, come la rincorsa prima di un salto. Il grafico dell'editor si estende oltre il riquadro unitario così puoi trascinare in quel territorio di overshoot e vedere il risultato all'istante.
Chrome DevTools ha un editor cubic-bezier integrato ma blocca i cursori nel riquadro 0–1, quindi non puoi creare effetti di overshoot o anticipazione. Firefox DevTools ha la stessa limitazione. Entrambi mancano anche del catalogo di preset con nome e delle opzioni di esportazione disponibili qui. Se hai bisogno di overshoot, questo è uno dei pochi strumenti che lo supporta davvero.
Confronto con altri strumenti cubic-bezier
cubic-bezier.com di Lea Verou è il riferimento che ha reso popolare il formato trascina-e-anteprima, ed è ancora eccellente per la generazione rapida di curve CSS. Ma non ha export GSAP, nessun output di funzione di easing JavaScript, nessuna modalità di confronto, nessuna libreria di preset Penner, e l'interfaccia si rompe su mobile. Easings.net è un riferimento in sola lettura — scegli una curva con nome e ti mostra i valori, ma non c'è editor e nulla da modificare.
Chrome e Firefox DevTools includono ciascuno un editor cubic-bezier leggero nell'inspector del browser, comodo quando sei già in DevTools. Il compromesso: non puoi usarli senza DevTools aperto, bloccano i cursori a 0–1 (nessun overshoot), non possono esportare codice GSAP o JS, e non funzionano su mobile. Il generatore di UtiloKit combina l'editor interattivo, la libreria di preset, lo strumento di confronto e tre formati di esportazione in una sola pagina che funziona su qualsiasi dispositivo.
Anteprima live e confronto affiancato
Premi play e un elemento demo fa un loop con la tua curva in modo da valutare il movimento, non solo i numeri. Passa la demo tra translate, scale e opacity e regola la durata per corrispondere alla tua animazione reale. Attiva Confronta per mettere una seconda curva accanto alla prima — perfetto per scegliere la giusta funzione di temporizzazione della transizione prima di applicarla in produzione.
Il cursore di durata controlla la velocità dell'anteprima da 200ms a 3 secondi, così puoi testare come si sente la stessa curva a velocità diverse. Un'anteprima al rallentatore spesso rivela problemi — come uno scatto all'inizio — che sono invisibili a 300ms. La maggior parte degli altri strumenti, incluso cubic-bezier.com, offre l'anteprima solo a una velocità fissa e non propone un confronto affiancato.
Esporta in CSS, GSAP e JavaScript — gratis
Copia ciò di cui ha bisogno il tuo stack. La scheda CSS ti dà sia un'istruzione transition su una riga che un blocco completo di animazione @keyframes. La scheda GSAP genera una chiamata CustomEase.create() in modo che la tua animazione GSAP corrisponda esattamente alla curva. La scheda JS genera una funzione di easing javascript cubic-bezier autonoma — un solutore Newton-Raphson che puoi inserire in requestAnimationFrame o qualsiasi tween senza dipendenze.
Hai trovato una curva che ti piace? Condividila. Lo strumento codifica i quattro valori nell'URL della pagina, quindi un link riproduce il tuo esatto easing su qualsiasi dispositivo. Tutto funziona nel tuo browser — nulla viene caricato, salvato o registrato — ed è completamente gratis senza bisogno di registrazione.
Frequently asked questions
Cos'è cubic-bezier in CSS?
cubic-bezier() è una funzione di easing (temporizzazione) definita da una curva di Bézier. Si scrive come cubic-bezier(x1, y1, x2, y2) in transition-timing-function o animation-timing-function, e i suoi due punti di controllo curvano la curva in modo che un'animazione acceleri e deceleri invece di muoversi a velocità costante. Per esempio, cubic-bezier(0.25, 0.1, 0.25, 1) corrisponde esattamente alla parola chiave CSS 'ease'.
Come funzionano i quattro valori di cubic-bezier?
cubic-bezier(x1, y1, x2, y2) elenca due punti di controllo: P1 = (x1, y1) tira l'inizio della curva e P2 = (x2, y2) tira la fine. La curva stessa inizia sempre a (0,0) e termina a (1,1). I valori x rappresentano il tempo e devono rimanere tra 0 e 1; i valori y rappresentano il progresso e possono scendere sotto 0 o salire sopra 1 per effetti di overshoot. Trascina i due cursori sul grafico e tutti e quattro i numeri si aggiornano in diretta.
Qual è la differenza tra ease, ease-in, ease-out ed ease-in-out?
linear si muove a velocità costante senza easing — sembra artificiale per la maggior parte delle UI. ease — il default CSS — inizia un po' veloce poi rallenta. ease-in inizia lentamente e accelera verso la fine, il che spesso dà la sensazione di qualcosa che cade. ease-out inizia veloce e decelera, il che di solito sembra più naturale per gli elementi che appaiono sullo schermo. ease-in-out è lento a entrambe le estremità e più veloce nel mezzo, ideale per elementi che attraversano lo schermo e devono fermarsi fluidamente.
I valori y di cubic-bezier possono superare 1 o scendere sotto 0?
I valori y possono, ed è così che si ottengono effetti di overshoot e anticipazione. I valori x (tempo) sono sempre limitati a 0–1, ma un y sopra 1 fa sì che l'elemento vada oltre il suo obiettivo e torni indietro — come una molla — mentre un y sotto 0 lo fa ritirare prima. Un esempio classico è easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Questo editor permette di trascinare i cursori fuori dal riquadro 0–1 per creare quegli effetti.
Come si usa cubic-bezier in una transizione o animazione CSS?
Inseriscilo nello slot della funzione di temporizzazione. Per una transizione: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Per un'animazione a keyframe: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. La scheda CSS di questo strumento genera automaticamente entrambi gli snippet con la tua curva e durata correnti, così puoi copiarli e incollarli direttamente nel tuo foglio di stile.
Come si converte un easing con nome come easeInOutQuad in cubic-bezier?
Caricalo dal catalogo dei preset — le curve di Penner / easings.net hanno tutte approssimazioni cubic-bezier standard. Per esempio easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1) e easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). Seleziona la curva con nome dalla galleria e copia il valore direttamente nel tuo CSS.
Questo generatore di cubic-bezier è gratuito e privato?
Completamente gratuito, senza registrazione e nulla viene caricato da nessuna parte. L'editor di curve, l'anteprima live e l'esportazione CSS, GSAP e JavaScript girano localmente nel tuo browser. Nulla di ciò che crei viene inviato a un server, quindi il tuo lavoro rimane interamente sul tuo dispositivo. Puoi anche condividere una curva tramite un link che codifica i quattro valori nell'URL — nessun account necessario.
Related tools
Vedi tutti gli strumenti
Novità Mixer di colori
Mescola due colori a qualsiasi proporzione e copia il risultato o qualsiasi passaggio.
Novità Selettore colori da immagine
Scegli qualsiasi colore da un’immagine ed estrai la palette dominante in HEX, RGB e HSL.
Novità Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novità Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Selettore e convertitore di colore
Scegli un colore e convertilo tra HEX, RGB, HSL e OKLCH.
Novità Verifica del contrasto dei colori
Controlla i rapporti di contrasto WCAG AA/AAA tra colore del testo e dello sfondo.