Gerador de curva cubic-bezier
NovoCrie uma curva de easing CSS arrastando os pontos de controle, com prévia ao vivo.
Runs entirely in your browser. Nothing is uploaded.
Crie curvas de easing CSS visualmente
Este gerador de cubic-bezier transforma o valor abstrato cubic-bezier(x1, y1, x2, y2) em algo que você pode ver e sentir. Arraste os dois pontos de controle no gráfico para moldar uma curva de aceleração, veja uma prévia ao vivo se mover com esse timing exato e copie um valor pronto para usar nas suas transições e animações CSS. É um editor de curvas de easing e um visualizador de cubic-bezier completo em um só, funcionando 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, então uma curva que sobe bruscamente no início significa um começo rápido, e uma que achata perto do final significa um final suave. Digite números precisos nas quatro entradas, arraste os pontos ou cole um valor cubic-bezier() existente para carregá-lo e ajustá-lo. O resultado atualiza em tempo real a cada movimento do ponto.
Mais de 30 presets: palavras-chave CSS e curvas de easing nomeadas
A barra de presets combina as duas coisas que os concorrentes costumam separar. Você tem as cinco palavras-chave CSS — linear, ease, ease-in, ease-out e ease-in-out — mais o catálogo completo de curvas de easing nomeadas 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 o restante 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 você reconheça o formato de uma olhada só, depois carrega direto no editor onde você pode refiná-la. O Easings.net só lista os nomes e mostra imagens estáticas — não dá pra editar nem exportar por lá. O cubic-bezier.com mostra as cinco palavras-chave CSS mas não o conjunto completo de Penner. Essa ferramenta traz os dois, com edição, em um único lugar.
Overshoot, quique e antecipação
Os valores y de um cubic-bezier não ficam limitados a 0–1. Empurre um ponto para cima da caixa e a animação passa do alvo antes de assentar — aquela sensação elástica do easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Puxe um ponto para baixo da caixa e o elemento recua primeiro, como uma corrida antes de um salto. O gráfico do editor se estende além da caixa unitária para você arrastar para esse território de overshoot e ver o resultado na hora.
O Chrome DevTools tem um editor de cubic-bezier embutido, mas prende os pontos na caixa 0–1, então você não consegue criar nenhum efeito de overshoot ou antecipação por lá. O Firefox DevTools tem a mesma limitação. Ambos também não têm o catálogo de presets nomeados e as opções de exportação que você tem aqui. Se precisar de overshoot, essa é uma das poucas ferramentas que realmente suporta.
Como se compara com outras ferramentas de cubic-bezier
O cubic-bezier.com de Lea Verou é a referência que popularizou o formato de arrastar e visualizar, e continua excelente para geração rápida de curvas CSS. Mas não tem exportação para 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 quebra no celular. O Easings.net é uma referência somente leitura — você escolhe uma curva nomeada e ele mostra os valores, mas não tem editor e nada para ajustar.
O Chrome e o Firefox DevTools incluem um editor leve de cubic-bezier dentro do inspetor do navegador, que é conveniente quando você já está no DevTools. A desvantagem: você não pode usá-los sem o DevTools aberto, eles travam os pontos em 0–1 (sem overshoot), não exportam código GSAP ou JS, e não funcionam no celular. O gerador do UtiloKit combina o editor interativo, a biblioteca de presets, a ferramenta de comparação e três formatos de exportação em uma única página que funciona em qualquer dispositivo.
Prévia ao vivo e comparação lado a lado
Aperte play e um elemento de demonstração fica em loop com sua curva para você julgar o movimento, não só os números. Mude a demo entre translate, scale e opacity e ajuste a duração para corresponder à sua animação real. Ative o Comparar para colocar uma segunda curva ao lado da primeira — perfeito para escolher a função de temporização de transição certa antes de mandar para produção.
O controle deslizante de duração vai de 200ms a 3 segundos, para você testar como a mesma curva se comporta em velocidades diferentes. Uma prévia em câmera lenta costuma revelar problemas — como um solavanco no início — que ficam invisíveis em 300ms. A maioria das outras ferramentas, incluindo o cubic-bezier.com, só faz a prévia em uma velocidade fixa e não oferece comparação lado a lado.
Exporte para CSS, GSAP e JavaScript — de graça
Copie o que o seu stack precisar. A aba CSS traz tanto um atalho de transition em uma linha quanto um bloco completo de animação @keyframes. A aba GSAP gera uma chamada CustomEase.create() para a sua animação GSAP corresponder exatamente à curva. A aba JS gera uma função de easing javascript cubic-bezier independente — um resolvedor Newton-Raphson que você pode jogar direto no requestAnimationFrame ou qualquer tween sem dependências.
Achou uma curva que gostou? Compartilhe. A ferramenta codifica os quatro valores na URL da página, então um link reproduz o seu easing exato em qualquer dispositivo. Tudo roda no seu navegador — nada é enviado, armazenado ou registrado — e é completamente de graça sem precisar criar conta.
Frequently asked questions
O que é o cubic-bezier no CSS?
cubic-bezier() é uma função de easing (temporização) definida por uma curva de Bézier. Você escreve como cubic-bezier(x1, y1, x2, y2) em transition-timing-function ou animation-timing-function, e os dois pontos de controle dobram a curva para que a animação acelere e desacelere em vez de se mover em velocidade constante. Por exemplo, cubic-bezier(0.25, 0.1, 0.25, 1) é exatamente o mesmo easing que a palavra-chave CSS 'ease'. Sem ela, suas transições ficam mecânicas e artificiais.
Como funcionam os quatro valores do cubic-bezier?
cubic-bezier(x1, y1, x2, y2) define dois pontos de controle: P1 = (x1, y1) puxa o início da curva e P2 = (x2, y2) puxa o final. A curva em si sempre começa em (0,0) e termina em (1,1). Os valores x representam o tempo e precisam ficar entre 0 e 1; os valores y representam o progresso e podem cair abaixo de 0 ou subir acima de 1 para efeitos de overshoot. Arraste os dois pontos no gráfico e os quatro números atualizam ao vivo enquanto você os move.
Qual a diferença entre ease, ease-in, ease-out e ease-in-out?
linear se move em velocidade constante sem easing — fica artificial pra maioria das UIs. ease — padrão do CSS — começa um pouco rápido e depois desacelera. ease-in começa devagar e acelera para o final, o que muitas vezes parece algo caindo. ease-out começa rápido e desacelera, o que geralmente parece mais natural para elementos que aparecem na tela. ease-in-out é devagar nas duas pontas e mais rápido no meio, ideal para elementos que percorrem a tela e precisam parar suavemente.
Os valores y do cubic-bezier podem passar de 1 ou ficar abaixo de 0?
Os valores y podem, e é assim que você consegue efeitos de overshoot e antecipação. Os valores x (tempo) ficam sempre entre 0 e 1, mas um y acima de 1 faz o elemento passar do alvo e voltar — tipo mola — enquanto um y abaixo de 0 faz ele recuar primeiro. Um exemplo clássico é easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Esse editor deixa você arrastar os pontos pra fora da caixa 0–1 pra criar esses efeitos e mostra o resultado ao vivo.
Como uso o cubic-bezier em uma transição ou animação CSS?
Coloque na propriedade de função de temporização. Para transição: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Para animação por keyframes: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. A aba CSS nessa ferramenta gera os dois trechos automaticamente com a sua curva e duração atuais, então você pode copiar e colar direto na sua folha de estilos.
Como converto um easing nomeado como easeInOutQuad para cubic-bezier?
Carregue do catálogo de presets — as curvas de Penner / easings.net têm aproximações padrão em 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 na galeria e copie o valor direto pro CSS.
Esse gerador de cubic-bezier é gratuito e privado?
Completamente grátis, sem cadastro e sem nada sendo enviado pra lugar nenhum. O editor de curvas, a prévia ao vivo e a exportação CSS, GSAP e JavaScript rodam localmente no seu navegador. Nada do que você criar é enviado para um servidor, então seu trabalho fica inteiramente no seu dispositivo. Você também pode compartilhar uma curva por link — os quatro valores ficam codificados na URL, sem precisar de conta.
Related tools
Ver todas as ferramentas
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer etapa.
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 entre HEX, RGB, HSL e OKLCH.
Novo Verificador de contraste de cores
Verifique as razões de contraste WCAG AA/AAA entre as cores de texto e fundo.