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
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
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.