26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Blog Endeos / EndeosLAB / 8 filtros CSS para imgenes que todo diseador web debera conocer

12 8 ltros CSS para imgenes que

Sep 14
todo diseador web debera
Categora:
conocer
EndeosLAB

Comentarios:
2 Comentarios

Tags:
css, html, web

permalink

En muchas ocasiones cuando un desarrollador o diseador web lleva a cabo la maquetacin de

un proyecto, necesita aplicar determinados efectos en algunas imgenes. Vamos a mostrar
unos filtros para aplicar los efectos ms populares usando nicamente cdigo CSS.

Antes de empezar, hay que tener en cuenta que algunos de estos filtros solo son compatibles
con los navegadores Google Chrome y Safari, aunque se prev que en futuras versiones de
los otros navegadores ms usados la compatibilidad con los filtros mejorar. De momento es
posible aplicar estos filtros en otros navegadores usando SVG.
https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 1/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Esta es la imagen original que vamos a usar para los ejemplos:

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Recorte de la imagen original de Dylan Baist-Bliss

Efecto de desenfoque: tendremos que indicar un nmero de pxeles, proporcional a la

intensidad del efecto.

.mi-imagen {

-webkit-filter: blur(3px);

filter: blur(3px);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 2/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Escala de grises: indicaremos el porcentaje de decoloracin.

.mi-imagen {

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 3/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Invertir: invierte el color, la saturacin y el brillo. Indicaremos el porcentaje de aplicacin.

.mi-imagen {

-webkit-filter: invert(100%);

filter: invert(100%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 4/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Tono sepia: indicaremos un porcentaje de aplicacin del tpico efecto vintage.

.mi-imagen {

-webkit-filter: sepia(100%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 5/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Rotando el color: te imaginabas poder rotar el color de la imagen unos cuantos grados? Pues
s se puede, indicando los grados a rotar.

.mi-imagen {

-webkit-filter: hue-rotate(45deg);

filter: hue-rotate(45deg);
Al usar
} este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Brillo: indicaremos el porcentaje de brillo que queramos darle a la imagen.

.mi-imagen {

-webkit-filter: brightness(50%);

filter: brightness(50%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 6/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Contraste: igual que en el caso anterior, indicaremos el porcentaje de contraste que nos
interese.

.mi-imagen {

-webkit-filter: contrast(200%);

filter: contrast(200%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 7/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Saturacin: este es un efecto bastante popular que sirve para incrementar la saturacin de
color en imgenes subexpuestas. Indicaremos un porcentaje.

.mi-imagen {

-webkit-filter: saturate(250%);

filter: saturate(250%);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 8/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Aplicando mltiples filtros

Si queremos aplicar ms de un filtro de manera simultnea, podemos hacerlo separando los
efectos que queramos usar con un espacio. Por ejemplo:

.mi-imagen {

-webkit-filter: saturate(150%) hue-rotate(45deg) blur(1px);

filter: saturate(150%) hue-rotate(45deg) blur(1px);

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 9/14
26/9/2017 8 filtros CSS para imgenes que todo diseador web debera conocer - Blog Endeos

Al usar este sitio acepta el uso de cookies para anlisis y contenido personalizado. Leer ms
ACEPTAR

Simple verdad? Si tienes cualquier duda o conoces algn efecto que no hayamos incluido,
puedes dejarnos un comentario. En Endeos disponemos de aos de experiencia en el
desarrollo y diseo web, no dudes en ponerte en contacto con nosotros si necesitas ayuda.

Compartir En Redes Sociales

Si este artculo te ha sido de ayuda o te parece interesante, aydanos a difundirlo.

Artculos Relacionados:

https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/ 10/14