Manipule a curva e veja o resultado instantâneo
O gerador permite ajustar visualmente os quatro parâmetros de uma curva cubic-bezier, arrastando os pontos de controle em um canvas. Conforme você muda os valores, a ferramenta simula uma animação usando um elemento exemplo, mostrando na hora como a curva impacta o movimento.
A visualização traz mais controle sobre experiências de UI, pois você entende exatamente como a animação irá se comportar, sem necessidade de testar no código manualmente.
Copie o cubic-bezier() pronto para usar no CSS
Depois que sua curva está definida, basta copiar o valor gerado em formato cubic-bezier() para colar direto no seu projeto. Não há suporte para exportar em outros formatos, mas esse padrão funciona em todas as propriedades CSS que aceitam easing personalizado.
O gerador aceita y-values fora de 0–1 para criar efeitos de overshoot ou bounce, ampliando as possibilidades para interfaces mais dinâmicas.
Tudo local e seguro, sem uploads ou integrações
Todo processamento e visualização acontece no navegador, utilizando JavaScript e Canvas. Nenhum dado da sua curva ou animação é enviado para servidores externos, garantindo privacidade total.
Não há integração com outras ferramentas ou frameworks, e o uso é totalmente gratuito, sem necessidade de cadastro. Os controles são intuitivos, mas requerem uso do mouse para arrastar os pontos de controle.
Perguntas frequentes
Como escolher a curva cubic-bezier ideal para minha animação?
Observe o objetivo da sua animação: transições suaves costumam usar curvas próximas do ease-in-out, enquanto efeitos de destaque podem exigir overshoot ou bounce. Teste visualmente e compare o resultado com a sensação desejada para seu usuário.
Consigo criar curvas com efeito bounce ou overshoot?
Sim, é possível ajustar os valores de y para fora do intervalo 0–1 e simular esses efeitos. Isso permite criar animações mais expressivas, indo além dos easings básicos oferecidos pelo CSS.
Qual a duração recomendada para transições de UI?
Transições de interface geralmente ficam entre 150 ms e 400 ms, dependendo do contexto e da complexidade. O gerador permite testar diferentes durações para visualizar o impacto direto na animação.
Meu dado é enviado para algum servidor ou salvo?
Não. Toda edição e visualização acontece localmente, sem upload ou armazenamento externo. Sua privacidade está garantida.
O código gerado funciona em todos os navegadores?
O cubic-bezier é suportado nas principais engines CSS modernas, como Chrome, Firefox, Edge e Safari. Confira a compatibilidade apenas se precisar rodar em navegadores antigos.
Posso testar a curva com diferentes durações?
Sim, basta alterar o campo de duração para ver, em tempo real, como a curva afeta o movimento da animação.
Problema ou sugestão para esta ferramenta? Conte para nós