Inclui predefinições ease, ease-in, ease-out, ease-in-out, linear.

O bounce verdadeiro requer keyframes, mas aproximações são possíveis.

Suporte de navegador?

Suportado em todos os navegadores modernos.

Meus dados estão seguros?

Sim, todo o processamento é feito no seu navegador.

Gerador de CSS Cubic Bezier

Crie visualmente curvas de easing para animações CSS. Arraste as alças e visualize animações em tempo real.

Predefinições

Editor de curva

P1(0.25, 0.10)

P2(0.25, 1.00)

Visualização

Duração

1.0s

Saída

cubic-bezier(0.25, 0.10, 0.25, 1.00)

transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);

Compartilhar ferramenta

📖

Como usar

Step 1

Ajustar Curva

Arraste as alças da curva bezier

→

Step 2

Visualizar

Confira com a visualização de animação

→

Step 3

Copiar

Copie o código CSS para uso

✨

Recursos

Controles Arrastáveis

Arraste os pontos de controle para ajustar a curva

Predefinições

Predefinições como ease, ease-in, ease-out

Visualização de Animação

Visualize o easing com animação ao vivo

❓

FAQ

Uma função de easing que define padrões de aceleração de animação.

🔗Ferramentas relacionadas

🎨

Ferramentas de Design

Conversor de Código de Cor

Converta entre códigos de cor HEX, RGB e HSL. Use o seletor de cores e a visualização em tempo real para seleção intuitiva de cores.

🎨

Ferramentas de Design

Seletor de Cores

Selecione cores intuitivamente usando uma roda de cores e controles deslizantes. Obtenha e copie códigos de cor nos formatos HEX, RGB e HSL.

🎨

Ferramentas de Design

Extrator de Cores de Imagem

Detecte automaticamente as cores dominantes de uma imagem e gere uma paleta de cores. Você também pode clicar em qualquer lugar da imagem para selecionar cores individuais.

🎯

Ferramentas de Design

Seletor de Cor Média da Imagem

Calcule a cor média de uma imagem inteira ou de uma área selecionada. Útil para escolher esquemas de cores ou cores de fundo de miniaturas.

🌈

Ferramentas de Design

Gerador de Gradiente CSS

Crie visualmente gradientes CSS com controles de arraste. Suporta tipos de gradiente linear, radial e cônico com predefinições.

🔲

Ferramentas de Design

Gerador de CSS Box Shadow

Crie visualmente CSS box-shadow com controles deslizantes. Suporta múltiplas sombras e sombras internas.