Generador de Cubic Bezier
NuevoDiseña una curva de aceleración CSS arrastrando puntos de control, con vista previa en vivo.
Runs entirely in your browser. Nothing is uploaded.
Diseña curvas de easing CSS de forma visual
Este generador de cubic-bezier convierte el valor abstracto cubic-bezier(x1, y1, x2, y2) en algo que puedes ver y sentir. Arrastra los dos manejadores de control en el gráfico para dar forma a una curva de aceleración, observa una vista previa en vivo que se mueve con ese tiempo exacto y luego copia un valor listo para usar en tus transiciones y animaciones CSS. Es un editor de curvas de easing y un visualizador de cubic-bezier completo en uno, que funciona enteramente en tu navegador — sin instalación, sin cuenta.
Cada curva va de (0,0) a (1,1). El eje horizontal es el tiempo y el eje vertical es el progreso, por lo que una curva que sube abruptamente al inicio significa un comienzo rápido, y una que se aplana cerca del final significa un final suave. Escribe números precisos en las cuatro entradas, arrastra los manejadores o pega un valor cubic-bezier() existente para cargarlo y ajustarlo. El resultado se actualiza en tiempo real con cada movimiento del manejador.
Más de 30 presets: palabras clave CSS y curvas de easing con nombre
La barra de presets combina las dos cosas que los competidores suelen separar. Obtienes las cinco palabras clave CSS — linear, ease, ease-in, ease-out y ease-in-out — más el catálogo completo de curvas de easing con nombre popularizadas por easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ y Back, cada una en variantes In, Out e In-Out. Eso significa que easeInOutCubic, easeOutQuart, easeOutBack y el resto están a un clic de distancia, ya convertidas a un valor css cubic-bezier.
Cada preset muestra una miniatura de curva para que puedas reconocer su forma de un vistazo, luego la carga directamente en el editor donde puedes refinarla. Easings.net solo lista los nombres y muestra imágenes estáticas — no puedes editar ni exportar desde allí. cubic-bezier.com muestra las cinco palabras clave CSS pero no el conjunto completo de Penner. Esta herramienta te da ambas, con edición, en un solo lugar.
Overshoot, rebote y anticipación
Los valores y de un cubic-bezier no están limitados a 0–1. Empuja un manejador por encima del cuadro y la animación sobrepasa su objetivo antes de asentarse — la sensación elástica de easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Tira de un manejador por debajo del cuadro y el elemento se prepara primero, como una carrera antes de un salto. El gráfico del editor se extiende más allá del cuadro unitario para que puedas arrastrar hacia ese territorio de overshoot y previsualizar el resultado al instante.
Chrome DevTools tiene un editor cubic-bezier incorporado pero fija los manejadores al cuadro 0–1, por lo que no puedes crear ningún efecto de overshoot o anticipación. Firefox DevTools tiene la misma limitación. Ambos también carecen del catálogo de presets con nombre y las opciones de exportación que obtienes aquí. Si necesitas overshoot, esta es una de las pocas herramientas que realmente lo soporta.
Cómo se compara con otras herramientas cubic-bezier
cubic-bezier.com de Lea Verou es la referencia que popularizó el formato de arrastrar y previsualizar, y sigue siendo excelente para la generación rápida de curvas CSS. Pero no tiene exportación GSAP, no genera funciones de easing en JavaScript, no tiene modo de comparación, no tiene biblioteca de presets Penner, y la interfaz se rompe en móvil. Easings.net es una referencia de solo lectura — eliges una curva con nombre y muestra los valores, pero no hay editor ni nada que ajustar.
Chrome y Firefox DevTools incluyen un editor lightweight de cubic-bezier dentro del inspector del navegador, que es conveniente cuando ya estás en DevTools. La contrapartida: no puedes usarlos sin DevTools abierto, fijan los manejadores a 0–1 (sin overshoot), no pueden exportar código GSAP o JS, y no funcionan en móvil. El generador de UtiloKit combina el editor interactivo, la biblioteca de presets, la herramienta de comparación y tres formatos de exportación en una sola página que funciona en cualquier dispositivo.
Vista previa en vivo y comparación lado a lado
Presiona play y un elemento de demostración se repite con tu curva para que juzgues el movimiento, no solo los números. Cambia la demostración entre translate, scale y opacity y ajusta la duración para que coincida con tu animación real. Activa Comparar para colocar una segunda curva junto a la primera — perfecto para elegir la función de tiempo de transición correcta antes de confirmarla en producción.
El control deslizante de duración controla la velocidad de vista previa de 200ms a 3 segundos, para que puedas probar cómo se siente la misma curva a diferentes velocidades. Una vista previa en cámara lenta a menudo revela problemas — como un tartamudeo al inicio — que son invisibles a 300ms. La mayoría de las otras herramientas, incluido cubic-bezier.com, solo presualizan a una velocidad fija y no ofrecen comparación lado a lado.
Exporta a CSS, GSAP y JavaScript — gratis
Copia lo que necesite tu stack. La pestaña CSS te da tanto un atajo de transition en una línea como un bloque completo de animación @keyframes. La pestaña GSAP genera una llamada CustomEase.create() para que tu animación GSAP coincida exactamente con la curva. La pestaña JS genera una función de easing javascript cubic-bezier independiente — un solucionador de Newton-Raphson que puedes añadir a requestAnimationFrame o cualquier tween sin dependencias.
¿Encontraste una curva que te gusta? Compártela. La herramienta codifica los cuatro valores en la URL de la página, por lo que un enlace reproduce tu easing exacto en cualquier dispositivo. Todo funciona en tu navegador — nada se sube, almacena ni registra — y es completamente gratis sin necesidad de registro.
Frequently asked questions
¿Qué es cubic-bezier en CSS?
cubic-bezier() es una función de easing (tiempo) definida por una curva de Bézier. Se escribe como cubic-bezier(x1, y1, x2, y2) en transition-timing-function o animation-timing-function, y sus dos puntos de control doblan la curva para que una animación acelere y desacelere en lugar de moverse a velocidad constante. Por ejemplo, cubic-bezier(0.25, 0.1, 0.25, 1) es exactamente el mismo easing que la palabra clave CSS 'ease'. Sin ella, todas tus transiciones se mueven a una velocidad constante plana y robótica.
¿Cómo funcionan los cuatro valores de cubic-bezier?
cubic-bezier(x1, y1, x2, y2) lista dos puntos de control: P1 = (x1, y1) tira del inicio de la curva y P2 = (x2, y2) tira del final. La curva en sí siempre comienza en (0,0) y termina en (1,1). Los valores x representan el tiempo y deben mantenerse entre 0 y 1; los valores y representan el progreso y pueden caer por debajo de 0 o subir por encima de 1 para efectos de overshoot. Arrastra los dos manejadores en el gráfico y los cuatro números se actualizan en vivo mientras los mueves.
¿Cuál es la diferencia entre ease, ease-in, ease-out y ease-in-out?
linear se mueve a velocidad constante sin easing — se ve artificial para la mayoría de las UI. ease — el valor predeterminado de CSS — comienza un poco rápido y luego desacelera. ease-in comienza lento y acelera hacia el final, lo que a menudo se siente como algo que cae. ease-out comienza rápido y desacelera, lo que generalmente se siente más natural para los elementos que aparecen en pantalla. ease-in-out es lento en ambos extremos y más rápido en el medio, ideal para elementos que viajan por la pantalla y necesitan detenerse suavemente.
¿Pueden los valores y de cubic-bezier superar 1 o bajar de 0?
Los valores y pueden hacerlo, y así es como se obtienen efectos de overshoot y anticipación. Los valores x (tiempo) siempre se fijan entre 0 y 1, pero un valor y por encima de 1 hace que el elemento sobrepase su objetivo y regrese — como un resorte — mientras que un valor y por debajo de 0 lo hace retroceder primero. Un ejemplo clásico es easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Este editor te permite arrastrar los manejadores fuera del cuadro 0–1 para crear esos efectos y previsualiza el resultado en vivo.
¿Cómo uso cubic-bezier en una transición o animación CSS?
Colócalo en el slot de la función de tiempo. Para una transición: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Para una animación de keyframes: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. La pestaña CSS en esta herramienta genera ambos fragmentos automáticamente usando tu curva y duración actuales, para que puedas copiarlos y pegarlos directamente en tu hoja de estilos.
¿Cómo convierto un easing con nombre como easeInOutQuad a cubic-bezier?
Cárgalo desde el catálogo de presets — las curvas de Penner / easings.net todas tienen aproximaciones estándar de cubic-bezier. Por ejemplo easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1) y easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). Elige la curva con nombre de la galería y copia el valor directamente en tu CSS.
¿Este generador de cubic-bezier es gratuito y privado?
Completamente gratis, sin registro y sin que nada se suba a ningún lugar. El editor de curvas, la vista previa en vivo y la exportación CSS, GSAP y JavaScript se ejecutan localmente en tu navegador. Nada de lo que crees se envía a un servidor, así que tu trabajo permanece completamente en tu dispositivo. También puedes compartir una curva mediante un enlace que codifica los cuatro valores en la URL — sin necesidad de cuenta.
Related tools
Ver todas las herramientas
Nuevo Mezclador de colores
Mezcla dos colores en cualquier proporción y copia el resultado o cualquier paso.
Nuevo Selector de color de imagen
Elige cualquier color de una imagen y extrae su paleta dominante en HEX, RGB y HSL.
Nuevo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nuevo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Selector y conversor de color
Elige un color y conviértelo entre HEX, RGB, HSL y OKLCH.
Nuevo Verificador de contraste de color
Comprueba las relaciones de contraste WCAG AA/AAA entre el texto y el fondo.