Acerca de esta herramienta
Este generador controla desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación y sepia. La vista previa usa elementos integrados en la página y no solicita imágenes remotas.
Cómo usarla
- Arrastra los deslizadores o introduce valores para ajustar los filtros.
- Observa los cambios en colores, bordes y opacidad en tiempo real.
- Copia la declaración filter generada.
- Pulsa «Restablecer» para recuperar todos los valores iniciales; la salida será filter: none.
Ejemplos de uso
- grayscale(100%) produce una imagen completamente en escala de grises.
- brightness(120%) aumenta el brillo; brightness(100%) conserva el original.
- blur(2px) suaviza los bordes y opacity(50%) vuelve semitransparente el elemento.
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;Funcionamiento y explicación del CSS
CSS filter aplica los efectos al elemento renderizado en el orden declarado. Los valores predeterminados son blur 0px, brightness 100%, contrast 100%, grayscale 0%, hue-rotate 0deg, invert 0%, opacity 100%, saturate 100% y sepia 0%. Los valores predeterminados se omiten; si todos lo son, se genera none.
Usos habituales
- Comparar estilos de filtro para tarjetas, ilustraciones o imágenes.
- Preparar CSS para efectos al pasar el cursor y para temas.
- Comprender cómo se combinan varias funciones filter.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Qué es CSS filter?
Es una propiedad visual del navegador que aplica desenfoque, brillo, ajustes de color y opacidad a los elementos.
¿Qué significa brightness(100%)?
Conserva el brillo original. Por debajo de 100% lo reduce y por encima lo aumenta.
¿Cómo se usan blur() y opacity()?
blur() recibe una longitud no negativa; opacity() controla la opacidad de 0 a 100%, siendo 100% totalmente opaco.
¿CSS filter modifica la imagen original?
No. Solo cambia su apariencia en el navegador; no escribe ni modifica el archivo original.
¿Por qué al restablecer aparece filter: none?
Cuando todos los parámetros recuperan su valor sin efecto, none expresa el resultado completo sin enumerar las funciones predeterminadas.