Los filtros de imágenes en CSS han estado ahí durante un tiempo y, junto a otras técnicas como los diferentes modos de mezcla, nos traen nuevas posibilidades para la recreación y manipulación de elementos en el navegador que antes teníamos que hacer en editores gráficos. En esta entrada se explora una técnica usando uno de los más olvidados efectos de filtro —la función filter— así como a recrearla usando imágenes SVG.

Para insertar imágenes codificadas en base64 en el propio CSS el primer paso es realizar una optimización de dicha imagen. Para ello podemos usar cualquier herramienta de edición gráfica, como por ejemplo GIMP. El siguiente paso es obtener la codificación en base64 de nuestra imagen, para lo que usaremos el comando base64 que viene instalado en la mayoría de distribuciones de Linux. El paso final es insertar el texto obtenido en el CSS usando la función url() de la forma: url("data:image/png;base64,XXXXXXXX").