Cómo oscurecer una imagen con CSS

Hoy te vamos a aprender cómo oscurecer una imagen utilizando CSS. Esto es algo muy util, y realmente muy sencillo, que te servirá para distintos proyectos.

Oscurecer una imagen con filter en CSS

Una forma de oscurecer una imagen usando CSS es con la propiedad filter. Esta propiedad es super util porque permite aplicar filtros a cualquier elemento. En este caso, lo usaremos para oscurecer el elemento <img>.

Paso 1: Crear la estructura en HTML

Primero definimos la estructura en HTML de nuestra imagen. Te recomiendo usar una clase para poder aplicar CSS a este luego.

<img src="https://regardis.com/wp-content/uploads/imagentipotumblr01.png" class="oscurecer">

El resultado sería una imagen tal cual:

Editar imagenes para tumblr

Paso 2: Aplicar CSS para oscurecer la imagen

Ahora vamos a usar la propiedad filter de CSS para oscurecer la imagen. Debemos cambiar el brillo de la imagen con el filtro brightness.

.oscurecer{
  filter: brightness(50%);
}

Como puedes ver, hemos colocado un valor de 50% al filtro de brightness, lo cual le quitará brillo a la imagen, haciéndola más oscura.

  • Un valor menor a 100% indica que la imagen perderá brillo, y se oscurecerá
  • El valor de 100% indica que la imagen se muestra tal cual, en su estado original.
  • Un valor mayor a 100% indica que la imagen obtendrá más brillo.

El resultado final será el siguiente:

Si deseas una imagen más oscura, puedes ir bajando más el porcentaje. Por otro lado, si la imagen es muy oscura, puede subir el porcentaje.

Si tienes alguna pregunta, déjanos un comentario para poder ayudarte.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.