Generador de Curvas de Aceleración Cubic Bezier
Crea curvas de aceleración cubic-bezier para CSS. Incluye ajustes preestablecidos estándar.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Cómo usar esta herramienta
- 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.
¿Qué es el Generador de Curvas Cubic Bezier?
Las animaciones CSS usan funciones de aceleración (easing) para controlar cómo cambian los valores con el tiempo. Los cuatro parámetros de cubic-bezier definen una curva de (0,0) a (1,1): cuanto más pronunciada es la curva, más rápida es la animación en esa región. Los ajustes preestablecidos comunes cubren la mayoría de las necesidades; las curvas personalizadas crean un movimiento distintivo.
Casos de uso comunes
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.
Preguntas frecuentes
¿Cuál es la diferencia entre ease y ease-in?▼
¿Cuándo debo usar curvas personalizadas?▼
Herramientas relacionadas
Conversor de Color (HEX/RGB/HSL)
Convierte colores entre los formatos HEX, RGB y HSL. Elige un color visualmente o introduce los valores manualmente.
Generador de Box Shadow CSS
Crea valores de box-shadow en CSS de forma visual. Previsualiza en tiempo real y copia el CSS generado.
Generador de Degradados CSS
Crea degradados CSS lineales y radiales. Elige los colores de forma visual y copia el CSS generado.
Generador de Paletas de Color
Genera paletas de color armoniosas a partir de cualquier color base. Admite esquemas complementarios, análogos, triádicos y monocromáticos.
Generador de Border Radius CSS
Crea valores complejos de border-radius en CSS de forma visual. Control independiente de cada esquina.
Generador de CSS Clamp()
Genera valores CSS fluidos y responsivos con clamp(). Escala suavemente entre tamaños mínimo y máximo a lo largo de los rangos del viewport.