Generador de degradados CSS
Degradados lineales, radiales y cónicos.
Diseño
Generador de filtros CSS
Filtros CSS y efecto cristal esmerilado.
Qué hace. Esta herramienta genera código de filtros CSS con vista previa, incluido el efecto de cristal esmerilado con backdrop-filter. Son efectos vistosos y de los más costosos en rendimiento, así que conviene usarlos con criterio.
Funciona en tu navegadorNo se sube nadaSin registroFunciona sin conexión
Cómo usar Generador de filtros CSS
- Ajusta los filtros que quieras combinar.
- Activa el efecto de fondo si buscas el cristal esmerilado.
- Copia el CSS resultante.
Los filtros disponibles
Se aplican con la propiedad filter y se pueden encadenar separados por espacios.
| Filtro | Efecto |
|---|---|
| blur() | desenfoque |
| brightness() | brillo |
| contrast() | contraste |
| saturate() | saturación |
| grayscale() | escala de grises |
| sepia() | tono sepia |
| hue-rotate() | gira el tono |
| drop-shadow() | sombra siguiendo la silueta |
El orden importa: los filtros se aplican en secuencia, así que blur() seguido de contrast() no da el mismo resultado que al revés.
drop-shadow() merece mención aparte porque hace algo que box-shadow no puede: seguir la forma real de un PNG con transparencia o de un SVG, en lugar del rectángulo del elemento.
Un uso muy práctico y poco conocido: combinar blur() y contrast() muy altos sobre elementos superpuestos produce el efecto de fusión entre formas, sin ninguna librería.
El cristal esmerilado y sus problemas
El efecto está de moda y tiene dos trampas conocidas.
Se consigue con backdrop-filter: blur(), que desenfoca lo que hay detrás del elemento en lugar del elemento mismo, más un fondo semitransparente encima.
El primer problema es la legibilidad. El texto sobre un fondo desenfocado tiene contraste impredecible, porque depende de lo que pase por detrás. Un panel de cristal sobre una imagen clara y luego sobre una oscura da resultados opuestos.
La solución es no confiar en el desenfoque para el contraste: añade un color de fondo semitransparente con suficiente opacidad, de forma que el texto tenga un contraste garantizado independientemente de lo que haya detrás.
El segundo problema es el rendimiento. backdrop-filter obliga al navegador a componer y desenfocar la región de detrás en cada fotograma, y es de las operaciones más caras que existen en CSS.
Úsalo en pocos elementos y en superficies pequeñas: una barra de navegación fija o un panel modal, no en una lista con veinte tarjetas. En móviles de gama baja la diferencia se nota mucho.
Cuándo no usarlos
Algunas cautelas que ahorran problemas.
Aplicar un filter a un elemento crea un nuevo contexto de apilamiento y un bloque contenedor para los descendientes con position: fixed. Eso hace que un elemento fijo dentro de un contenedor filtrado deje de comportarse como fijo — un fallo muy desconcertante de depurar.
Para imágenes grandes, aplicar filtros en CSS obliga a procesarlas en cada repintado. Si el efecto es permanente, es mejor exportar la imagen ya procesada.
Evita animar blur() directamente: es de lo más costoso que se puede animar. Si necesitas una transición, anima la opacidad entre dos capas, una nítida y otra ya desenfocada.
Respeta prefers-reduced-motion en cualquier animación de filtros: los efectos de desenfoque en movimiento provocan malestar a personas con sensibilidad vestibular.
Y comprueba siempre el resultado en modo oscuro. Un cristal esmerilado calibrado sobre fondo claro suele quedar irreconocible al invertir la paleta.
Preguntas frecuentes
¿Cómo hago el efecto de cristal?
Con backdrop-filter: blur() y un fondo semitransparente encima que garantice el contraste.
¿Es costoso el backdrop-filter?
Bastante. Úsalo en pocos elementos y superficies pequeñas, no en listas de tarjetas.
¿Importa el orden de los filtros?
Sí. Se aplican en secuencia, y cambiar el orden cambia el resultado.
¿Qué diferencia hay con box-shadow?
drop-shadow() sigue la silueta real de un PNG o SVG; box-shadow usa el rectángulo del elemento.
¿Por qué mi elemento fijo deja de serlo?
Porque un filtro en un ancestro crea un bloque contenedor para position: fixed.
¿Se envían mis datos?
No.