Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de cubic-bezier CSS

CSS Cubic Bezier Generator

Modele curvas de easing com pontos de controle arrastáveis, pré-visualize o movimento na sua duração e copie os valores cubic-bezier().

Caminho da tarefa / da entrada ao resultado

Posicione o primeiro ponto de controle

Roda localmente · Nada é enviado

Como Gerador de cubic-bezier CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar uma curva de easing cubic-bezier

  1. 01

    Posicione o primeiro ponto de controle

    Defina Controle X1 entre 0 e 1 e Controle Y1 entre −1 e 2. O gráfico da curva se redesenha ao vivo, com uma linha-guia do ponto inicial até a sua alça.

  2. 02

    Posicione o segundo ponto de controle

    Defina Controle X2 (0–1) e Controle Y2 (−1 a 2). Puxar um valor Y além de 1 é o que cria o overshoot que faz um easing parecer elástico; puxar Y1 abaixo de 0 adiciona um momento de antecipação antes do movimento começar.

  3. 03

    Defina a duração

    Escolha uma Duração de 0,1 a 4 segundos. O marcador na trilha de movimento percorre o loop usando a sua curva exata, então a cadência que você assiste é a cadência que você publica.

  4. 04

    Ou comece de uma curva conhecida

    A curva padrão — 0.25, 0.1, 0.25, 1 — é exatamente a palavra-chave ease padrão e um ponto de partida neutro. Pressione Carregar exemplo para uma curva elástica com overshoot (0.34, 1.56, 0.64, 1) que demonstra o que um valor Y além de 1 faz.

  5. 05

    Copie o CSS de timing

    Copiar CSS ou Baixar .css salva toolars-cubic-bezier.css. A regra .motion define transition-duration e as duas propriedades timing-function. Ela não define animation-duration; acrescente essa duração para animações por keyframes.

  6. 06

    Leia o gráfico antes de publicar

    O gráfico plota o progresso ao longo do tempo entre os pontos fixos de início e fim: trechos planos são lentos, trechos íngremes são rápidos. Uma curva que desce abaixo do início ou sobe além do fim não é erro — é antecipação e overshoot, desenhados com honestidade.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de cubic-bezier CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de cubic-bezier CSS realmente faz

Um modal que deve abrir com rapidez mas assentar suavemente, um hover de cartão que precisa de um pequeno overshoot, um tooltip de onboarding que deve parecer tranquilo — o easing é a diferença entre uma interface que parece acabada e uma que parece padrão. Plotar a curva aqui, contra uma pré-visualização animada real, é melhor do que adivinhar quatro números em uma folha de estilos, e a experimentação fica na aba. Quando o loop parece certo, os quatro valores já estão corretos para produção.

Perguntas frequentes

Por que X só vai de 0 a 1 enquanto Y vai de −1 a 2?
O padrão CSS mantém os dois valores de X dentro de [0, 1] para que o tempo sempre avance ao longo da curva. Y não tem esse limite — valores abaixo de 0 ou acima de 1 produzem antecipação e overshoot — e esta ferramenta limita Y de −1 a 2, o que cobre todo easing prático.
O que exatamente é exportado?
Uma classe .motion com três declarações: transition-duration com os seus segundos, e o mesmo valor cubic-bezier() atribuído a transition-timing-function e animation-timing-function.
Como leio a pré-visualização?
O gráfico plota a curva entre seus pontos fixos de início e fim com guias até as duas alças de controle, e a trilha abaixo anima um marcador na duração escolhida usando a função de timing real — a cadência honesta, não uma aproximação.
Como moldo um ease-in, ease-out ou efeito de mola?
Empurre o X da primeira alça em direção a 1 com um Y baixo para um ease-in de início lento; traga o X da segunda alça em direção a 0 com um Y alto para um ease-out suave. Empurre qualquer Y além de 1 para uma mola que ultrapassa o alvo, ou abaixo de 0 para antecipação.
A classe funciona tanto para transições quanto para animações de keyframes?
Sim — o mesmo valor cubic-bezier() é atribuído às duas propriedades de timing-function, e a duração fica em transition-duration. Se você só precisa de um mecanismo, apague a outra linha depois de colar; a curva em si é agnóstica ao mecanismo. Com keyframes, lembre que a função de timing se aplica entre cada par de quadros, não ao longo de toda a execução.
Algo é enviado ou armazenado?
Não. A curva é calculada e pré-visualizada localmente nesta aba, nenhuma conta é necessária e nada é registrado ou enviado. Pressione Redefinir para restaurar o ease padrão.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar