Filtros CSS estilo Instagram
Obtén definiciones y reglas de filtros CSS inspirados en Instagram para hojas de estilo web.
Ejecutar herramienta
Esta herramienta en línea proporciona definiciones CSS de filtros populares al estilo de Instagram para utilizarlas en proyectos de diseño web y desarrollo frontend. Al indicar el nombre de un filtro, la utilidad entrega los valores correspondientes de propiedades CSS, que pueden combinar funciones de contraste, brillo, saturación, rotación de tono, sepia y escala de grises. Entre las opciones reconocidas se encuentran estilos conocidos como clarendon, gingham, lark, reyes, juno, valencia, xpro2, willow y nashville, además de la opción base normal. Si no introduces ningún valor o escribes un término no reconocido, el sistema recurre al valor normal, que representa la visualización estándar sin modificaciones CSS añadidas. Puedes copiar directamente estas reglas de estilo para aplicarlas sobre imágenes, contenedores o elementos multimedia en tus hojas de estilo. De este modo, adaptas la estética visual de tus componentes web sin necesidad de procesar los píxeles de las imágenes de forma manual.
Instrucciones
- Escribe o selecciona el nombre del filtro deseado en el campo de texto, como valencia, clarendon o willow.
- Deja el campo vacío si prefieres obtener la configuración estándar sin efectos adicionales.
- Pulsa el botón para generar la definición del filtro.
- Copia la regla de filtro CSS resultante para pegarla en tu código o archivo de estilos.
Ejemplos
- Introduce "clarendon" para obtener la definición CSS con ajustes de contraste y saturación característicos de ese estilo.
- Introduce "willow" para consultar los valores CSS que generan un acabado monocromático en escala de grises.
Preguntas frecuentes
¿Qué ocurre si escribo un nombre de filtro que no existe?
La herramienta asigna automáticamente la opción normal, devolviendo la definición estándar sin filtros CSS aplicados.
¿Esta herramienta modifica los archivos de imagen directamente?
No. La herramienta entrega el código de estilo CSS para que lo apliques en el diseño de tu web, sin editar píxeles ni procesar archivos de imagen.
¿Qué nombres de filtro están admitidos?
Están disponibles normal, clarendon, gingham, lark, reyes, juno, valencia, xpro2, willow y nashville.