01
Comece por um preset próximo
Para entrada de elementos, experimente ease-out; para mudanças comuns, compare ease e Padrão Material. O preset define os quatro valores de uma vez, e uma edição posterior faz a seleção virar Personalizada.
HTML, CSS e código front-end
Gerador de Cubic BezierVeja o movimento antes de copiar
Arraste os pontos ou digite quatro números; confira o movimento antes de copiar o CSS.
Gerador de Cubic Bezier
Entrada da curva
Arraste os pontos ou use as setas; Shift aumenta o passo.
Resultado CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Prévia do movimento
A curva é processada neste navegador e não é enviada a um servidor.
Opções
A diagonal tracejada mostra progresso em velocidade constante.
Curva atualizada.
Uma transição pode parecer dura mesmo com a duração correta. O Gerador de Cubic Bezier permite ajustar separadamente o começo e o fim da curva, partindo de ease-out ou outro preset, em vez de trocar números às cegas.
Cole uma função que já está no seu CSS e preserve as casas decimais digitadas. Este editor de curva Bézier usa a prévia da animação e a reta linear para mostrar quando a curva de easing CSS acelera, desacelera ou ultrapassa o destino uma vez.
Por que usar o Gerador de Cubic Bezier?
Pontos, números e reprodução no navegador contam a mesma história.
O desenho acompanha os quatro números
Os dois pontos de controle e os campos X1, Y1, X2, Y2 representam uma única curva. No Gerador de Cubic Bezier, uma função colada mantém a precisão digitada, sem virar silenciosamente apenas duas casas decimais.
X inválido não vira um valor diferente
A regra CSS restringe X1 e X2 a 0–1, mas permite que Y saia desse intervalo. O Gerador de Cubic Bezier para o arrasto de X na borda; se você digitar X fora dela, o valor e o erro ficam visíveis. Y acima de 1 continua válido para ultrapassar o alvo.
Três verificações antes de levar a curva ao CSS
02
Ajuste o começo e o fim
O primeiro ponto pesa mais no início, o segundo na chegada. Ao arrastar, X para nas bordas; se for digitado fora do intervalo, o campo mostra erro. Y pode ser negativo ou maior que 1 para antecipar ou ultrapassar.
03
Reproduza na duração que vai usar
A prévia começa em 1000 ms e não fica repetindo sozinha. Essa duração não entra na função copiada. Com a atualização automática desligada, Ctrl/Cmd+Enter atualiza o resultado.
Editar a curva e conferir a saída
Quatro caminhos para os mesmos controles
Arrasto, teclas de seta, campos numéricos e importação alteram os mesmos pontos. A referência linear opcional mostra onde a curva passa antes ou depois de um progresso uniforme.
Prévia com a função real do navegador
A animação utiliza o cubic-bezier() gerado como easing do próprio navegador. Ela não confunde o parâmetro interno da curva com tempo decorrido e só se move quando você inicia a reprodução.
Duas formas de copiar CSS
Copie só a função ou uma declaração transition-timing-function completa. Se qualquer entrada ou opção mudar, os botões de cópia são bloqueados até o resultado ser atualizado.
Faixas válidas e limites de uma única curva
- X é limitado; Y pode sair da faixa
- X1 e X2 devem ficar entre 0 e 1. Ao arrastar, o ponto para na borda; um X digitado ou importado fora da faixa permanece no campo com erro. Y negativo ou acima de 1 é válido em CSS.
- Um trecho não é uma mola
- Uma função cubic-bezier() consegue antecipar ou ultrapassar o fim uma vez, mas não reproduz saltos repetidos nem física de spring. Para isso, use keyframes ou um modelo físico.
- Duração vale só para a prévia
- Informe milissegundos positivos e finitos. Mudar esse número não altera as quatro coordenadas nem a função copiada; a reprodução não fica em loop.
- Exportação restrita ao CSS de easing
- O gerador não lê uma folha CSS inteira, arquivo ou URL, não guarda biblioteca de presets e não cria código Tailwind, GSAP, JavaScript ou @keyframes completos.
Dúvidas sobre o Gerador de Cubic Bezier
O que significam os quatro números em cubic-bezier()?
São as coordenadas X1, Y1, X2 e Y2 de dois pontos de controle. O início (0,0) e o fim (1,1) são fixos. X representa o tempo de entrada; Y, o progresso do movimento.
Por que os valores de x precisam ficar entre 0 e 1?
As coordenadas X representam a passagem do tempo dentro do trecho. A sintaxe CSS exige esse intervalo para os dois pontos. Um valor fora dele é sinalizado sem ser corrigido silenciosamente.
Como faço um easing saltitante ou com overshoot?
Coloque Y2 acima de 1 ou escolha Ultrapassagem única para passar do alvo e voltar. Uma única função cubic-bezier() não gera vários saltos; para isso são necessários keyframes ou física de mola.
Qual é a diferença entre ease e ease-in-out?
ease distribui início e fim de forma assimétrica. ease-in-out acelera e desacelera de modo mais equilibrado, útil em transições de ida e volta. Compare os dois com a mesma duração.
Posso usar este valor para animation-timing-function também?
Sim. Cole a função em animation-timing-function ou na forma abreviada animation. Defina os keyframes, a duração e as repetições separadamente no seu CSS.
Ficou alguma dúvida?
Teste sua transição no Gerador de Cubic Bezier
Carregue a curva que você já usa, reproduza com a duração planejada e copie o valor válido. O Gerador de Cubic Bezier mantém pontos e números visíveis durante cada ajuste.