Editor de curvas de easing
Easing Curve Editor
Edita uma curva cubic-bezier ou de mola contra uma prévia animada e gera a função de tempo CSS.
Arrasta uma curva de easing cubic-Bézier e mostra o que ela faz com movimento real — um bloco animado pelo próprio compositor do navegador, mais uma faixa da mesma curva amostrada em passos de tempo iguais, para que a forma seja legível, e não apenas sentida.
Arraste qualquer um dos dois pontos, ou dê foco a um e use as setas — com shift o passo é dez vezes maior. A faixa sombreada vai de 0 a 1; o espaço acima e abaixo é o excesso, que só existe porque o CSS limita o x e deixa o y livre.
O x fica preso entre 0 e 1 porque o CSS exige: fora dessa faixa a declaração inteira é inválida e o navegador descarta. O y é livre de propósito: acima de 1 dá excesso e abaixo de 0 dá recuo, que é quase todo o motivo de alguém editar uma curva na mão.
A faixa de baixo é a mesma curva amostrada em vinte passos de tempo iguais. Marcas se juntando quer dizer que ali a animação está lenta; se espalhando, que está rápida — é a forma da curva dita como movimento.
Predefinições
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);Como usar
Arraste os dois pontos de controle
Ou foque um deles e use as setas do teclado — shift move dez vezes mais. Os números embaixo aceitam valores digitados, se você tiver uma curva para reproduzir.
Olhe a faixa, não o bloco
Um bloco em movimento é difícil de ler. As marcas abaixo dele são a curva em vinte passos de tempo iguais: agrupadas significa devagar, espalhadas significa rápido.
Copie o valor ou a transition inteira
Se os seus pontos caírem exatamente em uma palavra-chave — `ease`, `ease-in-out` — essa palavra-chave é emitida no lugar, porque é mais curta e diz a intenção.
Perguntas frequentes
Por que não consigo arrastar x para fora de 0–1?
Porque o CSS proíbe. Um x fora desse intervalo torna a declaração inteira inválida e o navegador descarta a propriedade — então a ferramenta limita em vez de deixar você construir algo que não faz nada em silêncio.
Para que serve y fora de 0–1?
Ultrapassagem acima de 1 — o elemento passa do alvo e volta a se acomodar — e antecipação abaixo de 0, em que ele recua antes de se mover. Essas duas são a maior parte do motivo de alguém editar uma curva em vez de pegar uma palavra-chave.
A prévia é precisa?
Sim — ela entrega a função de tempo ao navegador como uma animação CSS, que é o mesmo caminho de código que a sua `transition` vai percorrer. Amostrar a curva em um loop de JavaScript pareceria semelhante e não seria a mesma coisa.
Dá para fazer um efeito de mola ou de quique?
Um de verdade, não. Uma cubic-Bézier tem dois pontos de controle e consegue ultrapassar uma vez; uma mola oscila e precisa de `linear()` com muitas paradas, ou de uma biblioteca de animação baseada em física. A ultrapassagem aqui é o mais perto que uma única curva chega.
Pode receber de
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Editor de caminhos SVG
SVG Path Editor
Converte dados de caminho entre comandos absolutos e relativos, move, escala, gira e inverte, e mostra a bounding box com prévia ao vivo.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.