Generador de efectos CSS
Mueve los controles y mira el resultado. El CSS final se copia con un botón.
Cómo usarlo
Cuatro pestañas para cuatro tareas frecuentes. Bordes: define todas las esquinas a la vez o cada una por separado. Clip path: formas listas, del círculo a la estrella. Easing: dos puntos definen cómo acelera una animación, y Reproducir muestra el movimiento. Cristal: fondo desenfocado bajo un panel translúcido.
El sentido de una herramienta así es ver en vez de adivinar números. Vale sobre todo para la curva de easing: la diferencia entre 0,25 y 0,4 no se describe con palabras, pero salta a la vista en cuanto algo se mueve.
Preguntas frecuentes
¿El efecto cristal funciona en todos los navegadores?
backdrop-filter lo admiten todos los navegadores actuales, y el código incluye la variante -webkit- para Safari. En navegadores antiguos el fondo simplemente no se desenfoca y el panel translúcido se mantiene: la maquetación no se rompe.
¿Qué significan los cuatro números del easing?
Son las coordenadas de dos puntos de control que dan forma a la curva de aceleración. El primero y el tercero van en horizontal de 0 a 1. El segundo y el cuarto van en vertical y pueden salirse de ese rango, con lo que la animación se pasa un poco y vuelve.
¿Por qué clip-path recorta en vez de redondear?
Son propiedades distintas. border-radius redondea las esquinas de un rectángulo; clip-path recorta una forma libre y oculta todo lo que queda fuera, fondo y contenido incluidos.
¿Se envía algo a algún sitio?
No, todo se ejecuta en tu navegador.