Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de cubic-bezier CSS

CSS Cubic Bezier Generator

Traza curvas de easing con cuatro puntos de control y una vista previa animada real, incluida la sobreoscilación, y copia los valores cubic-bezier().

Ruta de la tarea / de la entrada al resultado

Coloca el primer punto de control

Funciona en local · No se sube nada

Cómo funciona Generador de cubic-bezier CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo diseñar una curva de easing cubic-bezier

  1. 01

    Coloca el primer punto de control

    Define Punto de control X1 entre 0 y 1 y Punto de control Y1 entre −1 y 2. El gráfico de la curva se redibuja en vivo, con una guía desde el punto inicial hasta tu manija.

  2. 02

    Coloca el segundo punto de control

    Define Punto de control X2 (0–1) y Punto de control Y2 (−1 a 2). Llevar un valor de Y más allá de 1 es lo que crea la sobreoscilación que hace que un easing parezca elástico; llevar Y1 por debajo de 0 añade un instante de anticipación antes de que empiece el movimiento.

  3. 03

    Define la duración

    Elige una Duración de 0,1 a 4 segundos. El marcador de la pista de movimiento la recorre en bucle usando tu curva exacta, así que la cadencia que ves es la cadencia que publicas.

  4. 04

    O parte de una curva conocida

    La curva predeterminada — 0,25; 0,1; 0,25; 1 — es exactamente la palabra clave ease estándar y un punto de partida neutro. Pulsa Cargar ejemplo para una curva elástica con sobreoscilación (0,34; 1,56; 0,64; 1) que demuestra lo que hace un valor de Y superior a 1.

  5. 05

    Copia el CSS de temporización

    Copiar CSS o Descargar .css guarda toolars-cubic-bezier.css. La regla .motion define transition-duration y ambas propiedades timing-function. No define animation-duration; para animaciones de fotogramas clave debes añadir esa duración aparte.

  6. 06

    Lee el gráfico antes de publicar

    El gráfico traza el progreso en el tiempo entre los puntos fijos de inicio y fin: los tramos planos son lentos y los empinados rápidos. Una curva que baja del inicio o sube más allá del final no es un error: es anticipación y sobreoscilación, dibujadas con honestidad.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de cubic-bezier CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de cubic-bezier CSS en realidad

Un modal que debe abrirse de golpe pero asentarse con suavidad, un hover de tarjeta que necesita una pequeña sobreoscilación, un tooltip de incorporación que debe sentirse pausado: el easing es la diferencia entre una interfaz terminada y una de fábrica. Trazar la curva aquí, frente a una vista previa animada real, supera a adivinar cuatro números en una hoja de estilos, y la experimentación se queda en la pestaña. Cuando el bucle se siente bien, los cuatro valores ya son correctos para producción.

Preguntas frecuentes

¿Por qué X solo va de 0 a 1 mientras Y va de −1 a 2?
El estándar CSS mantiene ambos valores de X dentro de [0, 1] para que el tiempo avance siempre a lo largo de la curva. Y no tiene ese límite — valores por debajo de 0 o por encima de 1 producen anticipación y sobreoscilación — y esta herramienta acota Y entre −1 y 2, lo que cubre cualquier easing práctico.
¿Qué se exporta exactamente?
Una clase .motion con tres declaraciones: transition-duration con tus segundos, y el mismo valor cubic-bezier() asignado a transition-timing-function y a animation-timing-function.
¿Cómo leo la vista previa?
El gráfico traza la curva entre sus puntos fijos de inicio y fin con guías hacia ambas manijas de control, y la pista de abajo anima un marcador con la duración elegida usando la función de temporización real: la cadencia honesta, no una aproximación.
¿Cómo moldeo un ease-in, un ease-out o un muelle?
Acerca la X de la primera manija a 1 con una Y baja para un ease-in de arranque lento; acerca la X de la segunda manija a 0 con una Y alta para un ease-out suave. Sube cualquier Y por encima de 1 para un muelle que sobrepasa su objetivo, o bájala de 0 para anticipación.
¿La clase sirve tanto para transiciones como para animaciones de keyframes?
Sí: el mismo valor cubic-bezier() se asigna a las dos propiedades timing-function, y la duración queda en transition-duration. Si solo necesitas un mecanismo, borra la otra línea tras pegarla; la curva en sí es agnóstica al mecanismo. Con keyframes, recuerda que la función de temporización se aplica entre cada par de fotogramas, no a todo el recorrido.
¿Se sube o se guarda algo?
No. La curva se calcula y se previsualiza localmente en esta pestaña, no hace falta cuenta, y nada se registra ni se envía. Pulsa Restablecer para recuperar el easing predeterminado.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear