Skip to main content
Editado.
Fonte Link

img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Use mask-image do CSS, veja abaixo.

Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).

O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.

Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}

Use mask-image do CSS, veja abaixo.

Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).

O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.

Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}

img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Use mask-image do CSS, veja abaixo.

Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).

O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.

Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}
Fonte Link

Use mask-image do CSS, veja abaixo.

Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).

O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.

Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}