Generador de filtros CSS

Cómo usar

1. Ajusta los deslizadores de filtro: usa los deslizadores para controlar desenfoque, brillo, contraste, saturación, rotación de tono, opacidad, escala de grises, sepia e inversión.
2. Previsualiza en tiempo real: la imagen o el elemento de ejemplo se actualiza al instante cuando mueves un deslizador.
3. Copia el CSS: el valor completo de la propiedad filter (p. ej. filter: brightness(1.2) contrast(1.5) saturate(0.8)) está listo para pegarse en tu hoja de estilo.

¿Por qué usar el generador CSS de filtros?

Los filtros CSS permiten aplicar efectos de tratamiento de imagen (desenfoque, contraste, brillo, desplazamientos de color) directamente en el navegador sin Photoshop ni software de edición de imagen. Funcionan sobre imágenes, vídeos y cualquier elemento HTML. Construir la cadena de la propiedad filter a mano exige conocer los nombres exactos de las funciones y los rangos de valores válidos. Este generador ofrece deslizadores intuitivos con retroalimentación visual para obtener exactamente el resultado que quieres.

Funcionalidades

• Todas las funciones CSS filter: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert y drop-shadow.
• Vista previa en directo: ve los cambios sobre una imagen de ejemplo o la tuya en tiempo real.
• Validación de valores: los deslizadores imponen los rangos válidos para cada función filter.
• Restablecimiento individual: restablece un único filtro a su valor por defecto sin tocar los demás.
• Salida combinada: todos los filtros seleccionados se combinan en una única cadena filter.

Preguntas frecuentes

¿Se pueden aplicar los filtros CSS a vídeos?

Sí. La propiedad filter CSS funciona en cualquier elemento, incluidos <video>, <img>, <div> y <canvas>. Aplicado a un vídeo, el filtro se renderiza en tiempo real durante la reproducción.

¿Cuál es la diferencia entre filter y backdrop-filter?

filter aplica el efecto al propio elemento y a todos sus hijos. backdrop-filter aplica el efecto al contenido situado detrás (bajo) el elemento, se usa habitualmente para efectos de vidrio esmerilado.

¿Los filtros CSS afectan al rendimiento?

Los filtros con desenfoque o compositing complejo pueden ser exigentes para la GPU. Para filtros animados, asegúrate de que el elemento esté en su propia capa de composición (añade transform: translateZ(0) como pista). Los filtros estáticos sobre imágenes e iconos tienen un impacto mínimo.

Lo que CSS filter realmente hace

La propiedad CSS filter aplica efectos gráficos (desenfoque, ajuste de contraste, cambio de color, sombra paralela) a un elemento y sus hijos antes de que el navegador lo pinte en la pantalla. El procesamiento ocurre completamente en el pipeline de renderizado del navegador, generalmente acelerado por GPU, sin JavaScript involucrado. Los efectos son solo visuales: el HTML subyacente, el archivo que una imagen referencia y el diseño permanecen sin cambios. Una fotografía mostrada con filter: grayscale(1) aún tiene sus colores originales en el archivo; el navegador convierte a escala de grises solo en la visualización.

CSS filter expone diez funciones: blur(px) para desenfoque gaussiano, brightness(n) y contrast(n) para ajustes tonales, saturate(n) para intensidad de color, hue-rotate(deg) para desplazar la rueda de color, opacity(n) para transparencia, grayscale(n) y sepia(n) para efectos de desaturación, invert(n) para salida negativa, y drop-shadow(...) para sombras conscientes de la forma (a diferencia de box-shadow, drop-shadow sigue la forma renderizada real incluyendo transparencia, ideal para sombras en iconos o imágenes PNG con bordes recortados). Las funciones se encadenan: filter: brightness(1.2) contrast(1.3) saturate(0.9) aplica las tres en secuencia.

Por qué esto importa para el diseño web moderno: hace una década, ajustar el brillo, el tono o la saturación de las imágenes para la consistencia del diseño requería preprocesar cada imagen en Photoshop y reexportar. CSS filter trae los mismos ajustes al tiempo de ejecución, aplicados de forma no destructiva. Puedes servir una sola imagen y presentarla de diferentes maneras según el tema, el estado de hover o la preferencia del usuario. También puedes usar filtros para accesibilidad: una foto en escala de grises invertida como marcador de posición, o una superposición de imagen oscurecida para legibilidad de texto con alto contraste. La compensación es el rendimiento para algunos filtros (especialmente el desenfoque) y el hecho de que los filtros también afectan a los hijos, lo que puede cascadear inesperadamente.

Cómo funciona esta herramienta tras bambalinas

Cada control deslizante en la herramienta está vinculado a una sola función de filtro. Cuando mueves un deslizador, JavaScript lee el valor, construye la cadena de función de filtro con ese valor (e.g., brightness(1.4)), y concatena todas las funciones activas en una sola cadena CSS filter. Esa cadena se aplica como un estilo en línea en la imagen de vista previa, produciendo retroalimentación visual inmediata mientras el navegador vuelve a pintar con el nuevo filtro. No se procesan datos de imagen en JavaScript: los cálculos reales a nivel de píxel ocurren dentro del motor de renderizado del navegador, generalmente en la GPU.

El CSS generado mostrado en la caja de código es la misma cadena aplicada a la vista previa. Haz clic en «Copiar CSS» y la herramienta escribe esa cadena en tu portapapeles usando la API moderna navigator.clipboard.writeText(). La cadena está lista para pegar en el atributo style de cualquier elemento o cualquier declaración de clase en tu hoja de estilo. La herramienta también soporta cargar tu propia imagen: elige un archivo y se convierte en una URL blob: temporal en el navegador, nunca subida a ningún lugar, y el filtro se previsualiza en tu imagen real para que puedas marcar el aspecto exacto para tu contenido.

El comportamiento de reinicio es por filtro: cada deslizador tiene su propio botón de reinicio que devuelve solo ese filtro a su valor sin efecto (1 para multiplicadores, 0deg para hue-rotate, 0px para blur). El botón «Restablecer todo» devuelve cada deslizador a neutral simultáneamente. El estado de la herramienta vive solo en memoria; refresca la página y tu combinación de filtros se ha ido. Ningún servidor almacena tus valores de filtro elegidos, ningún análisis rastrea qué combinaciones pruebas. La herramienta es un patio de juegos CSS sin estado, soportado por anuncios.

Breve historia de los filtros CSS

• Primitivos de filtro SVG, 2001.SVG 1.0 (Recomendación W3C, septiembre de 2001) define un sistema de filtros completo: feGaussianBlur, feColorMatrix, feConvolveMatrix y docenas más. El modelo de filtro SVG es potente pero verboso, y aplicar filtros SVG a elementos HTML requiere filter: url(#id) que referencia SVG en línea, nunca ampliamente adoptado en flujos de trabajo orientados a HTML.
• Módulo CSS Filter Effects Nivel 1, 2014.El W3C publica el Filter Effects Module Nivel 1 (diciembre de 2014), introduciendo las funciones de filtro abreviadas simplificadas (blur, brightness, contrast, etc.) que no requieren SVG en línea. Estas coinciden con las necesidades de procesamiento de imágenes más comunes en el 95% de los casos y son dramáticamente más fáciles de crear que los filtros SVG.
• El soporte del navegador alcanza masa crítica, 2015.Chrome 53 (2015) y Firefox 35 (2015) envían soporte de filter sin prefijo; Safari tiene soporte con prefijo desde la versión 6 (2012). Para 2015, CSS filter es ampliamente utilizable en sitios de producción. Los diseñadores comienzan a usar filtros para efectos de hover, normalización de imagen y tratamientos decorativos a escala.
• backdrop-filter se envía, 2017 a 2024.Safari 9 (2015) introduce -webkit-backdrop-filter para efectos de vidrio esmerilado. Chromium envía backdrop-filter sin prefijo en Chrome 76 (julio de 2019). Firefox espera hasta la versión 103 (julio de 2022). La «barra de navegación esmerilada» estilo iOS se convierte en un patrón de UI moderno predeterminado.
• El modo oscuro empuja la adopción de filtros, 2019.La tendencia de diseño del modo oscuro (macOS Mojave 2018 de Apple, Android 10 2019, iOS 13 2019, navegador prefers-color-scheme 2019) acelera el uso de filtros para CSS «modo oscuro automático» invert-and-hue-rotate, donde una sola regla filter: invert(1) hue-rotate(180deg) convierte un sitio de modo claro en una vista de modo oscuro pasable sin rediseño.
• La complejidad del filtro SVG vuelve vía CSS, 2024 en adelante.El Módulo CSS Filter Effects Nivel 2 (borrador) propone nuevas funciones y la capacidad de componer pipelines de filtro personalizados sin SVG en línea, cerrando la brecha entre las funciones abreviadas convenientes y el poder completo de los primitivos de filtro SVG. El soporte del navegador todavía se está implementando durante 2025.

Flujos del mundo real

• Normalización de imágenes consistente con la marca.Un sitio que obtiene imágenes de muchos fotógrafos o proveedores de stock obtiene saturación, contraste y brillo inconsistentes. Aplicar un filtro CSS uniforme a todas las imágenes (filter: saturate(0.85) contrast(1.05) brightness(0.95)) las lleva a todas a la misma paleta de colores sin preprocesar cada archivo. Invierte el filtro para una imagen específica cuando quieras que se destaque.
• Estados de hover e interacción.Los efectos de hover usando transiciones de filtro se sienten pulidos y ligeros. Las imágenes de tarjeta con filter: grayscale(0.5) en reposo y filter: grayscale(0) en hover crean una invitación sutil a interactuar. Las miniaturas de imagen con filter: brightness(0.9) en reposo y brightness(1.1) en hover hacen lo mismo sin requerir dos archivos de imagen.
• UI de vidrio esmerilado con backdrop-filter.Las superposiciones modales, las barras de navegación adhesivas y los popovers de tooltip usando backdrop-filter: blur(20px) sobre un fondo semitransparente producen el efecto de vidrio esmerilado estilo iOS. Esto ahora se espera en sitios de marketing modernos; filter no aplica porque queremos desenfocar lo que está detrás de la superposición, no la superposición misma.
• Temática dinámica y modo oscuro.Modo oscuro barato: envuelve tu sitio en un contenedor con filter: invert(1) hue-rotate(180deg) activado vía media query o toggle. Esto convierte el texto oscuro en claro, los fondos claros en oscuros, mientras preserva la mayoría de los colores. Es una victoria rápida que maneja el 80% de los requisitos del modo oscuro sin diseñar dos temas. Las imágenes reales deberían ser excluidas con un filter: invert(1) hue-rotate(180deg) anidado para deshacer la inversión, de lo contrario las fotos se ven raras.
• Herramientas de accesibilidad y modos de alto contraste.Los usuarios con discapacidades visuales pueden aplicar filtros a nivel de navegador (extensión de alto contraste de Chrome, inversión a nivel de SO), pero los diseñadores también pueden ofrecer toggles de filtro a nivel de sitio: un botón que aplica filter: contrast(2) a toda la página para usuarios con baja visión. WebAIM y WCAG no requieren esto, pero es una cortesía de accesibilidad de bajo costo que algunos sitios agregan.
• Tratamientos artísticos de fotos.Tonos sepia, looks vintage, efectos de foto blueprint y otros tratamientos artísticos combinan funciones de filtro: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) produce un look vintage de tonos fríos en una declaración. Comparado con los preajustes del editor de imágenes, CSS filter es no destructivo y ajustable en vivo sin reexportar.

Trampas comunes y lo que significan

• El desenfoque es el filtro caro.Entre las funciones de filtro, blur() es el más intensivo en GPU, especialmente en radios grandes (más de 20px) en elementos grandes. Animar el desenfoque o aplicarlo a muchos elementos simultáneamente puede reducir las tasas de cuadros notablemente. Para barras de navegación esmeriladas adhesivas, el desenfoque cubre un área pequeña y funciona bien; para desenfoques modales de pantalla completa, espera un breve tartamudeo en dispositivos de gama baja. Otros filtros (contrast, brightness, saturate) son casi gratuitos en GPU modernas.
• Los filtros afectan a todos los descendientes.Aplicar filter a un contenedor afecta a cada elemento hijo dentro de él. Si envuelves una tarjeta en un contenedor con filter: grayscale(1), el texto dentro también se vuelve en escala de grises (lo que generalmente no cambia nada ya que el texto ya es monocromo) y cualquier elemento hijo coloreado (iconos, insignias) pierde su color. Para filtrar solo hijos específicos, aplica el filtro en ellos individualmente, no en el padre.
• El bajo contraste daña la legibilidad.Reducir el contraste (filter: contrast(0.5)) en una tarjeta con texto dentro hace que el texto sea más difícil de leer, a menudo cayendo por debajo de la relación de contraste WCAG AA 4.5:1 para texto normal. Aplica los filtros que reducen el contraste con cuidado; verifica que cualquier texto encima permanezca legible. Para elementos puramente decorativos (imágenes de fondo, divisores), el contraste reducido está bien.
• Los filtros no cambian las áreas de clic.A diferencia de clip-path, CSS filter no cambia el área clicable de un elemento. Un botón con filter: blur(5px) se ve suave y desenfocado pero sigue siendo totalmente clicable en su rectángulo original. Esto generalmente es deseado pero puede ser sorprendente cuando un elemento «fantasma» o «con apariencia deshabilitada» aún se dispara al hacer clic. Combina filter con pointer-events: none para deshabilitar realmente la interacción.
• Safari necesita el prefijo -webkit- para backdrop-filter.La propiedad filter básica está sin prefijo en todos los navegadores modernos. Pero backdrop-filter aún requiere el prefijo -webkit-backdrop-filter en Safari (incluyendo versiones más nuevas). Para efectos de vidrio esmerilado entre navegadores, declara tanto -webkit-backdrop-filter como backdrop-filter con el mismo valor. Los auto-prefijadores manejan esto; si estás escribiendo CSS a mano, recuerda el prefijo.
• Animar cadenas de filtros es saltón.Las transiciones CSS en filter interpolan suavemente cuando la cadena de filtros permanece igual (e.g., transicionar blur(0px) a blur(10px)). Pero agregar o quitar funciones a mitad de transición (e.g., transicionar de blur(0px) a blur(10px) brightness(1.2)) salta abruptamente. Para transiciones multi-filtro suaves, declara todos los filtros en los estados de inicio y fin con los valores de línea base apropiados (brightness(1) es el predeterminado).

Privacidad: todo sucede en tu navegador

Las herramientas generadoras de CSS vienen en dos sabores: páginas HTML simples corriendo JavaScript del lado del cliente (privadas, rápidas) y editores en la nube que guardan tus proyectos (colaborativos pero con compensaciones de privacidad). Esta herramienta es del primer tipo. Tus valores de deslizador, tu CSS generado, e incluso cualquier imagen que subas para previsualizar permanecen completamente en tu sesión del navegador. Refresca la página y el estado se va a menos que hayas copiado el CSS primero o guardado una captura de pantalla.

La función «subir tu propia imagen» merece una nota de privacidad: cuando eliges un archivo, el navegador crea una URL blob: local apuntando a la memoria, y la vista previa muestra tu imagen con el filtro aplicado. No se hace ninguna solicitud a ningún servidor. Abre la pestaña de Red del navegador mientras subes; verás cero tráfico saliente. La imagen existe solo en la memoria de la pestaña de tu navegador y se borra cuando cierras la pestaña. Para imágenes confidenciales (diseños propietarios, escaneos médicos, capturas protegidas por NDA), esta es la propiedad de privacidad que importa.

Cuándo otra herramienta es la opción correcta

• Photoshop o Lightroom para ediciones permanentes.CSS filter es solo en tiempo de visualización: el archivo de imagen subyacente no cambia. Si quieres que el archivo de imagen real tenga esos ajustes incorporados (tamaño de archivo menor, cargas de página más rápidas, sin riesgo de fallback sin filtrar en navegadores más antiguos), edita la imagen en Photoshop, Lightroom, GIMP o Affinity Photo. CSS filter es para visualización dinámica; los editores de imágenes son para procesamiento permanente.
• Image Filters para procesamiento por lotes puntual.Nuestra herramienta Image Filters aplica efectos de filtro similares pero produce un PNG/JPG descargable con el filtro incorporado. Para procesar muchas imágenes de manera consistente para un portafolio, conjunto de redes sociales o biblioteca de activos, ese flujo es más rápido que aplicar filtros CSS en tiempo de ejecución. Ambas herramientas sirven diferentes casos de uso.
• Filtro SVG para efectos complejos.Los atajos de CSS filter cubren la mayoría de las necesidades pero no todo. Distorsión ondulada, núcleos de convolución personalizados (detección de bordes, repujado), patrones de ruido feTurbulence, mapas de desplazamiento: todos requieren primitivos de filtro SVG vía SVG en línea más filter: url(#myFilter). Crear filtros SVG es más difícil pero desbloquea efectos que el atajo de CSS filter no puede producir.
• Propiedades personalizadas CSS para temas.El truco del «modo oscuro invertido» usando filter tiene limitaciones: las fotos se ven mal, los colores se desplazan, el rendimiento puede sufrir. Para modo oscuro de calidad de producción, las propiedades personalizadas CSS (--bg-color, --text-color) con dos conjuntos de temas distintos son más limpias. El modo oscuro basado en filtro es una victoria rápida, no una solución pulida.

Más preguntas frecuentes

¿Puedo animar los cambios de filtro CSS suavemente?

Sí, con advertencias. La propiedad filter es animable en CSS, y las transiciones entre dos cadenas de filtro con las mismas funciones en el mismo orden interpolan suavemente (blur(0px) brightness(1) a blur(10px) brightness(1.5) funciona). Agregar o quitar funciones a mitad de transición salta abruptamente. Para animación multi-filtro suave, lista cada función que quieras transicionar en los estados de inicio y fin, usando valores neutrales (brightness(1), saturate(1), blur(0px)) donde no quieras que se aplique un filtro específico.

¿CSS filter funciona en imágenes de fondo?

Sí. CSS filter se aplica al elemento entero incluyendo su imagen de fondo, contenido y elementos hijos. Si quieres filtrar solo la imagen de fondo pero no el contenido en primer plano, el enfoque típico es usar un elemento hijo separado para el fondo (e.g., un pseudo-elemento ::before posicionado) con el filtro aplicado, luego colocar el contenido como un hermano sin filtrar encima. La propiedad backdrop-filter también es útil cuando quieres filtrar lo que es visible detrás de un elemento transparente.

¿Los filtros CSS son indexados por motores de búsqueda?

Los filtros CSS son puramente visuales y no cambian el contenido HTML. Los motores de búsqueda indexan el contenido subyacente (texto alt de la imagen, texto circundante) como si el filtro no se hubiera aplicado. Una imagen en escala de grises con filter: grayscale(1) todavía es indexada como la imagen a color original basada en su archivo y texto alt. Esto generalmente es lo que quieres: sin efectos secundarios del filtro en SEO o lectores de pantalla.

¿Por qué drop-shadow se ve diferente de box-shadow?

Box-shadow dibuja una sombra alrededor de la caja rectangular de un elemento, ignorando cualquier transparencia. Drop-shadow (filter) dibuja una sombra que sigue la forma renderizada real, incluyendo regiones transparentes. Para un icono SVG con bordes recortados o un PNG con transparencia, drop-shadow produce una sombra consciente de la forma que coincide con el contorno visible. Box-shadow en el mismo elemento mostraría una sombra rectangular alrededor del cuadro delimitador, lo que se ve mal. Usa drop-shadow para sombras conscientes de la forma, box-shadow para elementos rectangulares.

¿Cuál es la diferencia entre opacity y filter: opacity()?

En la mayoría de los navegadores producen resultados visualmente idénticos. La diferencia técnica: opacity es una propiedad de nivel superior, mientras que filter: opacity() es parte de la cadena de filtros y se compone con otros filtros. Si tienes filter: blur(5px) opacity(0.5), ambos se aplican juntos como una sola operación GPU. Usar opacity fuera de la cadena de filtros funciona igual en la mayoría de los casos. Quédate con opacity para transparencia independiente; usa filter: opacity() solo cuando encadenes con otros filtros.

¿Puedo reiniciar todos los filtros rápidamente?

Sí. Establece filter: none para eliminar todos los filtros en una declaración. Esta es la forma más limpia de reiniciar, especialmente para estados de hover donde quieres eliminar todos los efectos de filtro al salir del hover. Alternativamente, establece cada función de filtro a su valor neutral: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) es funcionalmente equivalente a filter: none pero más verboso.