Generador de filtros CSS
Mueve los controles deslizantes para dar estilo a una imagen con filtros CSS, arrastra el divisor para compararla con el original y copia la declaración del filtro. Pruébalo con tu propia foto: nunca sale de tu dispositivo.
Última actualización:
Cómo usar Generador de filtros CSS
- Elige una imagen: mantén la de ejemplo o pulsa Elegir mi imagen para cargar tu propia foto.
- Parte de un estilo como Vintage o Noir, o ve directamente a los controles deslizantes.
- Ajusta los controles deslizantes de desenfoque, brillo, contraste, tono y más; activa Sombra si quieres una.
- Arrastra el divisor en la vista previa para comparar la imagen filtrada con la original.
- Copia el CSS y pégalo en tu hoja de estilos, o descarga la imagen filtrada como PNG.
Referencia de funciones de filtro CSS
| Función | Sin cambio | Rango y efecto |
|---|---|---|
blur(5px) | 0 | Radio de desenfoque gaussiano en px o em. Valores más altos desenfocan más; no admite valores negativos. |
brightness(120%) | 100% | 0% es negro; por encima de 100% aclara. |
contrast(150%) | 100% | 0% es gris plano; por encima de 100% aumenta el contraste. |
grayscale(100%) | 0% | 100% elimina todo el color. |
sepia(100%) | 0% | 100% da un tono fotográfico marrón cálido completo. |
hue-rotate(90deg) | 0deg | Gira cada color alrededor de la rueda de colores; 360deg vuelve al inicio. |
saturate(200%) | 100% | 0% es escala de grises; por encima de 100% intensifica los colores. |
invert(100%) | 0% | 100% da un negativo fotográfico; 50% es gris sólido. |
opacity(50%) | 100% | Como la propiedad opacity, pero se puede combinar en la cadena de filtros. |
drop-shadow(0 8px 16px rgba(0,0,0,.35)) | none | Desplazamiento x, desplazamiento y, desenfoque y color; sigue la forma de los píxeles visibles. |
Los porcentajes también se pueden escribir como números: brightness(1.2) es lo mismo que brightness(120%).
Usos prácticos
- Efectos al pasar el cursor: muestra logotipos en escala de grises y recupera el color al pasar el cursor con
filter: grayscale(1)ytransition: filter .3s. - Imágenes atenuadas detrás de texto:
brightness(60%)en una imagen de portada mejora el contraste de los títulos blancos. - Sombras de iconos:
drop-shadow()en iconos PNG o SVG transparentes da una sombra que se ajusta a la forma, algo que box-shadow no puede hacer. - Vidrio esmerilado: usa las mismas funciones en
backdrop-filtersobre un panel semitransparente; consulta el Generador CSS de glassmorphism. - ¿Necesitas un cambio permanente? Para aplicar los filtros al propio archivo, usa Descargar PNG aquí o la herramienta Filtros de fotos.
Preguntas frecuentes
¿Qué hace la propiedad CSS filter?
filter aplica efectos gráficos como desenfoque, cambios de color y sombras a un elemento y a todo su contenido mientras se dibuja. El diseño del elemento no cambia y el archivo de imagen original no se modifica.
¿Importa el orden de las funciones de filtro?
Sí. Las funciones se aplican una tras otra de izquierda a derecha, así que grayscale(1) sepia(1) da un tono marrón, mientras que sepia(1) grayscale(1) termina en gris simple. Este generador las escribe en un orden fijo y predecible.
¿Qué diferencia hay entre drop-shadow() y box-shadow?
box-shadow dibuja una sombra alrededor de la caja rectangular del elemento. filter: drop-shadow() sigue los píxeles visibles reales, así que se ajusta al contorno de PNG transparentes, iconos SVG y formas con clip-path. drop-shadow no tiene valor de expansión (spread) ni opción inset.
¿Qué es backdrop-filter?
backdrop-filter aplica las mismas funciones a lo que hay detrás de un elemento en lugar de al propio elemento. Con un fondo semitransparente crea el efecto de vidrio esmerilado, por ejemplo backdrop-filter: blur(10px) saturate(160%).
¿Los filtros CSS son lentos?
Los filtros de color simples son ligeros y normalmente están acelerados por la GPU. Los radios de desenfoque grandes y las sombras en elementos grandes o animados cuestan más, así que úsalos con cuidado en páginas largas con desplazamiento y en teléfonos de gama baja.
¿Puedo guardar la imagen filtrada?
Sí. Descargar PNG vuelve a dibujar tu imagen en un canvas con el mismo filtro y la guarda. Usa filtros de canvas, que funcionan en Chrome, Edge y Firefox; en los navegadores sin soporte, el botón explica que solo se puede copiar el CSS.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.