CSS Cubic Bezier Visual
Editor visual de timing functions CSS. Arrastrá los puntos de control, compará con presets (ease, ease-in, spring) y copiá el cubic-bezier() listo para usar.
Inicia sesion para usar esta herramienta
Gratis y sin contrasena — solo con tu cuenta Google
Siguiente paso
Preguntas frecuentes
- ¿Qué es un cubic-bezier en CSS?
- Es una función matemática que define cómo progresa una animación o transición en el tiempo. Toma 4 parámetros (x1, y1, x2, y2) que posicionan dos puntos de control de la curva. Valores Y fuera del rango [0,1] crean efectos de rebote o spring.
- ¿Cuál es la diferencia entre los presets?
- ease arranca rápido y desacelera suave. ease-in arranca lento y acelera. ease-out desacelera al llegar. linear es velocidad constante. spring y bounce tienen valores Y > 1 que generan un efecto de sobrepasamiento o rebote.
- ¿Por qué x1 y x2 solo van de 0 a 1?
- El eje X representa el tiempo, que siempre avanza de 0% a 100%. Permitir X fuera de ese rango haría que el tiempo retrocediera, lo que no tiene sentido para animaciones CSS. Y sí puede ir fuera de [0,1] para crear efectos de overshoot.
- ¿Cómo uso el resultado en mi CSS?
- Copiá el valor generado (ej: cubic-bezier(0.25, 0.1, 0.25, 1)) y pegalo en tu propiedad transition-timing-function o animation-timing-function. También podés usarlo directamente en el shorthand: transition: all 300ms cubic-bezier(...).
Herramientas relacionadas
Generador de gradiente CSS
Creá gradientes lineales o radiales con hasta 5 colores. Obtené el CSS y las clases Tailwind con un click.
Color picker con OKLCH y escala Tailwind
Convierte colores entre HEX, RGB, HSL, OKLCH y P3. Genera escalas de 11 tonos estilo Tailwind v4 con análisis de contraste APCA. Exporta CSS custom properties o @theme Tailwind v4.
Diff checker
Compara dos textos y resalta las diferencias línea por línea. Verde para adiciones, rojo para eliminaciones.