Gerador de Curva Cubic Bezier CSS
Construa uma função de timing cubic-bezier() a partir de presets de easing nomeados (ease, ease-in-out, curvas Sine/Quad/Cubic/Back no estilo Material…) ou seus próprios pontos de controle X1/Y1/X2/Y2, com pré-visualização de curva SVG ao vivo. Funciona inteiramente no seu navegador.
Entrada
Escolha uma curva de easing nomeada, ou escolha Personalizado para definir seus próprios pontos de controle.
Afeta apenas a linha de transição de exemplo abaixo.
Saída
Your curve will appear here.
| Propriedade | Valor |
|---|---|
| No data yet | |
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-cubic-bezier-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"preset": "ease",
"x1": "0.25",
"y1": "0.1",
"x2": "0.25",
"y2": "1",
"duration": "1"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-cubic-bezier-generator` tool (CSS Cubic Bezier Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-cubic-bezier-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Curva Cubic Bezier CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que este gerador de cubic-bezier faz
Converte quatro números de ponto de controle em uma função de timing CSS cubic-bezier(x1, y1, x2, y2) pronta para colar — o mesmo valor que você passaria para transition-timing-function ou animation-timing-function — e desenha a curva exata que esses números descrevem, para que você possa ver o easing antes de usá-lo. Escolha um dos 29 presets nomeados (palavras-chave ease/ease-in/ease-out/ease-in-out/linear padrão, mais as famílias Sine, Quad, Cubic, Quart, Quint, Expo, Circ e Back mais completas popularizadas pelo easings.net e usadas em todo o Material Design), ou mude para Personalizado e defina seus próprios X1/Y1/X2/Y2.
Como usar
- Escolha um preset na lista suspensa ou escolha Personalizado.
- Se você escolheu Personalizado, defina X1, Y1, X2 e Y2. X1 e X2 são fixados em 0–1 (a especificação CSS exige isso); Y1 e Y2 podem ser qualquer número.
- Copie o bloco Código CSS — ele inclui as declarações
transition-timing-function/animation-timing-functione um exemplo detransition:funcional na sua duração escolhida. - Verifique a pré-visualização da curva e a tabela Detalhes da Curva, que informa se o easing é uma curva de easing padrão ou uma que faz overshoot.
O que X1, Y1, X2, Y2 realmente controlam?
Uma curva cubic-bezier CSS sempre começa em (0, 0) e termina em (1, 1) — esses dois pontos são fixos pela especificação e não são configuráveis. X1/Y1 e X2/Y2 são os dois pontos de controle que puxam a curva entre eles, da mesma forma que as alças em uma curva bezier em uma ferramenta de desenho vetorial fazem. X representa o progresso através da duração da animação (portanto, deve permanecer entre 0 e 1 — um valor fora desse intervalo torna todo o cubic-bezier() CSS inválido, e o navegador o ignora). Y representa o progresso através da propriedade sendo animada — e é permitido ir abaixo de 0 ou acima de 1.
Por que a pré-visualização da curva sai da caixa?
Sempre que Y1 ou Y2 cai fora de 0–1, o valor animado brevemente excede seu alvo ou mergulha para trás antes de se estabilizar — é exatamente para o que curvas como ease-in-back (um pequeno "wind-up" antes de se mover) ou ease-out-back (um pequeno overshoot antes de se estabilizar) servem. É CSS completamente válido, não um erro; a caixa de referência tracejada da pré-visualização apenas torna visível. Uma curva bezier cúbica sempre fica dentro da forma formada por seus quatro pontos, portanto sempre que Y1 e Y2 ficam dentro de 0–1, toda a curva também é garantida — esse é o caso de "curva de easing padrão" que a tabela de detalhes relata.
Meus dados são privados?
Sim. Tudo — construir a string CSS e desenhar a pré-visualização SVG — funciona inteiramente no seu navegador. Nada é carregado ou registrado.