Categoría: Desarrollo
Generador de filtros CSS
Crea una declaración de filtro CSS con controles en vivo
Ajusta desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación y sepia con controles deslizantes, previsualiza el efecto combinado en vivo y copia la declaración CSS filter resultante.
filter: none;
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
La propiedad CSS filter aplica efectos gráficos como el desenfoque y el ajuste de color directamente en el navegador, sin editar la imagen de origen. Combinar varias funciones en una sola declaración es engorroso de escribir a mano; esta herramienta construye la cadena a medida que ajustas cada efecto, e incluye solo las funciones que realmente has modificado.
Cómo se usa
- Arrastra los controles deslizantes para ajustar cada función de filtro.
- Observa cómo se actualiza la vista previa en tiempo real.
- Copia la declaración filter generada en tu hoja de estilos.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Puedo aplicar esto a una imagen de fondo en lugar de a un elemento?
- Sí: filter funciona en cualquier elemento, incluidos los que tienen un background-image. Para desenfocar solo el fondo detrás de un elemento (no su contenido), usa backdrop-filter en su lugar.
- ¿filter afecta al rendimiento?
- Los filtros complejos o animados, especialmente el desenfoque, pueden resultar costosos de renderizar en tamaños grandes. Pruébalo en los dispositivos reales a los que apuntas antes de publicar un filtro animado.
- ¿Por qué importa el orden de las funciones de filter?
- Cada función se aplica sobre el resultado de la anterior, así que grayscale(100%) sepia(50%) puede verse distinto que en el orden inverso. Esta herramienta las aplica en un orden fijo y razonable.