Aplica y previsualiza efectos de filtro CSS con controles deslizantes y preajustes
Los filtros CSS aplican efectos visuales a imágenes, fondos y elementos HTML completos utilizando renderizado acelerado por GPU. La propiedad filter acepta una o más funciones: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() y drop-shadow().
Este generador proporciona controles deslizantes en vivo para cada función de filtro y muestra una vista previa en tiempo real. La salida es una única declaración CSS filter lista para pegar.
filter se aplica al elemento y sus contenidos. backdrop-filter se aplica solo al área detrás del elemento, dejando el propio contenido del elemento sin afectar. backdrop-filter se usa para efectos de vidrio esmerilado.
Los filtros son acelerados por GPU en los navegadores modernos y generalmente son muy rápidos para elementos estáticos. Animar filtros en elementos grandes puede causar tartamudeos.
filter se aplica al elemento completo incluyendo su fondo. Para filtrar solo la imagen de fondo sin afectar el contenido, coloca la imagen en un pseudo-elemento ::before.
hue-rotate desplaza todos los colores del elemento alrededor de la rueda de colores por el ángulo especificado. 0grd = sin cambio; 180grd = colores complementarios; 360grd vuelve al original.
Generador de sombra de caja CSS · Generador de radio de borde CSS · Generador de Flexbox · Generador de CSS Grid · Generador de sombra de texto CSS · Generador de animaciones CSS