Editor de curvas de aceleración
Easing Curve Editor
Ajusta una curva cubic-bezier o de resorte contra una vista previa animada y emite la función de tiempo en CSS.
Arrastra una curva de aceleración cúbica de Bézier y muestra qué le hace al movimiento real: un bloque animado por el propio compositor del navegador, más una tira de la misma curva muestreada a pasos de tiempo iguales, para que la forma se lea y no solo se sienta.
Arrastra cualquiera de los dos puntos, o enfoca uno y usa las flechas: con shift el paso es diez veces mayor. La banda sombreada va de 0 a 1; el espacio de arriba y de abajo es el rebase, que existe solo porque CSS limita la x y deja libre la y.
La x se limita a 0–1 porque CSS lo exige: fuera de ese rango la declaración entera es inválida y el navegador la descarta. La y se deja libre a propósito: por encima de 1 hay rebase y por debajo de 0 hay impulso previo, que es casi toda la razón por la que alguien edita una curva a mano.
La tira de abajo es la misma curva muestreada en veinte pasos de tiempo iguales. Que las marcas se junten quiere decir que ahí la animación es lenta, y que se separen, que es rápida: la forma de la curva dicha como movimiento.
Preajustes
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);Cómo se usa
Arrastra los dos puntos de control
O enfoca uno y usa las flechas del teclado; Mayús mueve diez veces más. Los números de debajo aceptan valores escritos si tienes una curva que reproducir.
Mira la tira, no el bloque
Un bloque en movimiento es difícil de leer. Las marcas de debajo son la curva en veinte pasos de tiempo iguales: juntas significa lento, separadas significa rápido.
Copia el valor o la transición entera
Si tus puntos caen exactamente en una palabra clave —`ease`, `ease-in-out`—, se emite esa palabra clave en su lugar, porque es más corta y dice la intención.
Preguntas frecuentes
¿Por qué no puedo arrastrar x fuera de 0–1?
Porque CSS lo prohíbe. Una x fuera de ese rango invalida la declaración entera y el navegador descarta la propiedad, así que la herramienta lo limita en lugar de dejarte construir algo que en silencio no hace nada.
¿Para qué sirve y fuera de 0–1?
Sobrepaso por encima de 1 —el elemento pasa de su destino y vuelve a asentarse— y anticipación por debajo de 0, donde retrocede antes de moverse. Esas dos cosas son casi toda la razón por la que alguien edita una curva en lugar de tomar una palabra clave.
¿La vista previa es exacta?
Sí: le entrega la función de tiempo al navegador como una animación CSS, que es la misma ruta de código que tomará tu `transition`. Muestrear la curva en un bucle de JavaScript se vería parecido y no sería lo mismo.
¿Puedo conseguir un resorte o un rebote?
No uno de verdad. Una Bézier cúbica tiene dos puntos de control y puede sobrepasar una vez; un resorte oscila y necesita `linear()` con muchas paradas, o una biblioteca de animación basada en física. El sobrepaso de aquí es lo más cerca que llega una sola curva.
Puede recibir de
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Editor de trazados SVG
SVG Path Editor
Convierte los datos de un trazado entre comandos absolutos y relativos, lo desplaza, escala, gira e invierte, y muestra su caja envolvente con vista previa.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.