Gerador de Curvas de Aceleração Cubic Bezier
Crie curvas de aceleração cubic-bezier para CSS. Inclui predefinições padrão.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Como usar esta ferramenta
- 1
Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.
- 2
Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.
- 3
Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.
- 4
Copy that declaration by hand and drop it into your CSS transition or animation rule.
O que é o Gerador de Curvas Cubic Bezier?
As animações CSS usam funções de aceleração (easing) para controlar como os valores mudam ao longo do tempo. Os quatro parâmetros de cubic-bezier definem uma curva de (0,0) a (1,1): quanto mais acentuada a curva, mais rápida é a animação naquela região. As predefinições comuns cobrem a maioria das necessidades; as curvas personalizadas criam um movimento distintivo.
Casos de uso comuns
Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.
Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.
Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.
Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.
Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.
Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.
Perguntas frequentes
Qual é a diferença entre ease e ease-in?▼
Quando devo usar curvas personalizadas?▼
Ferramentas relacionadas
Conversor de Cores (HEX/RGB/HSL)
Converta cores entre os formatos HEX, RGB e HSL. Escolha uma cor visualmente ou insira os valores manualmente.
Gerador de Box Shadow CSS
Crie valores de box-shadow em CSS de forma visual. Visualize em tempo real e copie o CSS gerado.
Gerador de Gradientes CSS
Crie gradientes CSS lineares e radiais. Escolha as cores de forma visual e copie o CSS gerado.
Gerador de Paletas de Cores
Gere paletas de cores harmoniosas a partir de qualquer cor base. Suporta esquemas complementares, análogos, triádicos e monocromáticos.
Gerador de Border Radius CSS
Crie valores complexos de border-radius em CSS de forma visual. Controle independente de cada canto.
Gerador de CSS Clamp()
Gere valores CSS fluidos e responsivos com clamp(). Escala suavemente entre tamanhos mínimo e máximo ao longo dos intervalos de viewport.