Gerador de cubic-bezier
NovoDesenhe uma curva de easing CSS arrastando pontos de controlo, com pré-visualização ao vivo.
Runs entirely in your browser. Nothing is uploaded.
Desenhe curvas de easing CSS visualmente
Este gerador de cubic-bezier transforma o valor abstracto cubic-bezier(x1, y1, x2, y2) em algo que pode ver e sentir. Arraste os dois manejadores de controlo no gráfico para moldar uma curva de aceleração, veja uma pré-visualização em directo a mover-se com esse tempo exacto e copie um valor pronto a usar para as suas transições e animações CSS. É um editor de curvas de easing e um visualizador de cubic-bezier completo num só, a funcionar inteiramente no seu navegador — sem instalação, sem conta.
Cada curva vai de (0,0) a (1,1). O eixo horizontal é o tempo e o eixo vertical é o progresso, por isso uma curva que sobe abruptamente no início significa um começo rápido, e uma que se achata perto do final significa um final suave. Escreva números precisos nas quatro entradas, arraste os manejadores ou cole um valor cubic-bezier() existente para o carregar e ajustar. O resultado actualiza-se em tempo real com cada movimento do manejador.
Mais de 30 presets: palavras-chave CSS e curvas de easing com nome
A barra de presets combina as duas coisas que os concorrentes costumam separar. Obtém as cinco palavras-chave CSS — linear, ease, ease-in, ease-out e ease-in-out — mais o catálogo completo de curvas de easing com nome popularizadas pelo easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ e Back, cada uma nas variantes In, Out e In-Out. Isso significa que easeInOutCubic, easeOutQuart, easeOutBack e os restantes estão a um clique de distância, já convertidos para um valor css cubic-bezier.
Cada preset mostra uma miniatura da curva para que possa reconhecer a sua forma de relance, depois carrega-a directamente no editor onde pode refiná-la. O Easings.net apenas lista os nomes e mostra imagens estáticas — não é possível editar ou exportar a partir daí. O cubic-bezier.com mostra as cinco palavras-chave CSS mas não o conjunto completo de Penner. Esta ferramenta oferece ambos, com edição, num único lugar.
Overshoot, ressalto e antecipação
Os valores y de um cubic-bezier não estão limitados a 0–1. Empurre um manejador acima da caixa e a animação ultrapassa o seu alvo antes de assentar — a sensação elástica de easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Puxe um manejador abaixo da caixa e o elemento prepara-se primeiro, como uma corrida antes de um salto. O gráfico do editor estende-se além da caixa unitária para que possa arrastar para esse território de overshoot e pré-visualizar o resultado instantaneamente.
O Chrome DevTools tem um editor cubic-bezier incorporado mas limita os manejadores à caixa 0–1, pelo que não é possível criar efeitos de overshoot ou antecipação. O Firefox DevTools tem a mesma limitação. Ambos carecem também do catálogo de presets com nome e das opções de exportação disponíveis aqui. Se precisar de overshoot, esta é uma das poucas ferramentas que realmente o suporta.
Como se compara com outras ferramentas cubic-bezier
O cubic-bezier.com de Lea Verou é a referência que popularizou o formato de arrastar e pré-visualizar, e continua a ser excelente para geração rápida de curvas CSS. Mas não tem exportação GSAP, não gera funções de easing em JavaScript, não tem modo de comparação, não tem biblioteca de presets Penner, e a interface falha em dispositivos móveis. O Easings.net é uma referência só de leitura — escolhe uma curva com nome e mostra os valores, mas não há editor nem nada para ajustar.
O Chrome e o Firefox DevTools incluem um editor lightweight de cubic-bezier dentro do inspector do navegador, o que é conveniente quando já está no DevTools. A desvantagem: não é possível utilizá-los sem o DevTools aberto, limitam os manejadores a 0–1 (sem overshoot), não exportam código GSAP ou JS, e não funcionam em dispositivos móveis. O gerador do UtiloKit combina o editor interactivo, a biblioteca de presets, a ferramenta de comparação e três formatos de exportação numa única página que funciona em qualquer dispositivo.
Pré-visualização em directo e comparação lado a lado
Prima play e um elemento de demonstração repete-se com a sua curva para que julgue o movimento, não apenas os números. Mude a demonstração entre translate, scale e opacity e ajuste a duração para corresponder à sua animação real. Active Comparar para colocar uma segunda curva ao lado da primeira — perfeito para escolher a função de temporização de transição correcta antes de a confirmar em produção.
O controlo deslizante de duração controla a velocidade de pré-visualização de 200ms a 3 segundos, para que possa testar como a mesma curva se sente a diferentes velocidades. Uma pré-visualização em câmara lenta revela frequentemente problemas — como uma hesitação no início — que são invisíveis a 300ms. A maioria das outras ferramentas, incluindo o cubic-bezier.com, apenas pré-visualiza a uma velocidade fixa e não oferece comparação lado a lado.
Exporte para CSS, GSAP e JavaScript — grátis
Copie o que a sua stack necessita. O separador CSS fornece tanto um atalho de transition numa linha como um bloco completo de animação @keyframes. O separador GSAP gera uma chamada CustomEase.create() para que a sua animação GSAP corresponda exactamente à curva. O separador JS gera uma função de easing javascript cubic-bezier independente — um solucionador de Newton-Raphson que pode adicionar ao requestAnimationFrame ou a qualquer tween sem dependências.
Encontrou uma curva de que gosta? Partilhe-a. A ferramenta codifica os quatro valores no URL da página, pelo que uma ligação reproduz o seu easing exacto em qualquer dispositivo. Tudo funciona no seu navegador — nada é carregado, armazenado ou registado — e é completamente grátis sem necessidade de registo.
Frequently asked questions
O que é o cubic-bezier em CSS?
cubic-bezier() é uma função de easing (temporização) definida por uma curva de Bézier. Escreve-se como cubic-bezier(x1, y1, x2, y2) em transition-timing-function ou animation-timing-function, e os seus dois pontos de controlo curvam a curva para que uma animação acelere e desacelere em vez de se mover a velocidade constante. Por exemplo, cubic-bezier(0.25, 0.1, 0.25, 1) é exactamente o mesmo easing que a palavra-chave CSS 'ease'.
Como funcionam os quatro valores do cubic-bezier?
cubic-bezier(x1, y1, x2, y2) lista dois pontos de controlo: P1 = (x1, y1) puxa o início da curva e P2 = (x2, y2) puxa o final. A curva em si começa sempre em (0,0) e termina em (1,1). Os valores x representam o tempo e devem manter-se entre 0 e 1; os valores y representam o progresso e podem descer abaixo de 0 ou subir acima de 1 para efeitos de overshoot. Arraste os dois manejadores no gráfico e os quatro números actualizam-se em directo enquanto os move.
Qual é a diferença entre ease, ease-in, ease-out e ease-in-out?
linear move-se a velocidade constante sem easing — parece artificial para a maioria das UI. ease — o padrão do CSS — começa um pouco rápido e depois desacelera. ease-in começa lento e acelera para o final, o que muitas vezes parece algo a cair. ease-out começa rápido e desacelera, o que geralmente parece mais natural para elementos que aparecem no ecrã. ease-in-out é lento em ambas as extremidades e mais rápido no meio, ideal para elementos que percorrem o ecrã e precisam de parar suavemente.
Os valores y do cubic-bezier podem ultrapassar 1 ou ficar abaixo de 0?
Os valores y podem, e é assim que se obtêm efeitos de overshoot e antecipação. Os valores x (tempo) são sempre limitados a 0–1, mas um y acima de 1 faz com que o elemento ultrapasse o seu alvo e regresse — como uma mola — enquanto um y abaixo de 0 faz com que recue primeiro. Um exemplo clássico é easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Este editor permite arrastar os manejadores fora da caixa 0–1 para criar esses efeitos.
Como uso o cubic-bezier numa transição ou animação CSS?
Coloque-o no slot da função de temporização. Para uma transição: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Para uma animação de keyframes: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. O separador CSS nesta ferramenta gera ambos os fragmentos automaticamente usando a sua curva e duração actuais, para que possa copiá-los e colá-los directamente na sua folha de estilos.
Como converto um easing com nome como easeInOutQuad para cubic-bezier?
Carregue-o a partir do catálogo de presets — as curvas de Penner / easings.net têm todas aproximações padrão de cubic-bezier. Por exemplo 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). Escolha a curva com nome na galeria e copie o valor directamente para o seu CSS.
Este gerador de cubic-bezier é gratuito e privado?
Completamente gratuito, sem registo e sem que nada seja enviado para lado algum. O editor de curvas, a pré-visualização em directo e a exportação CSS, GSAP e JavaScript funcionam localmente no seu navegador. Nada do que criar é enviado para um servidor, pelo que o seu trabalho permanece inteiramente no seu dispositivo.
Related tools
Ver todas as ferramentas
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer passo.
Novo Seletor de cores de imagem
Escolha qualquer cor de uma imagem e extraia a paleta dominante em HEX, RGB e HSL.
Novo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Seletor e conversor de cor
Escolha uma cor e converta-a entre HEX, RGB, HSL e OKLCH.
Novo Verificador de contraste de cor
Verifique os rácios de contraste WCAG AA/AAA entre o texto e a cor de fundo.