Filtros CSS

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 22 de 43.

Os filtros permitem que você altere visualmente imagens, planos de fundo e até mesmo texto usando efeitos divertidos. É como colocar óculos de sol, acender um holofote ou entrar no modo preto e branco — tudo com uma única linha de CSS.

1. Blur (px) – Torna o elemento suave e fora de foco.

img {
  filter: blur(5px);
}
//levemente fora de foco

2. Brilho(%) – Controla o quão claro ou escuro algo aparece.

img {
  filter: brightness(150%);
}
//clareia como se estivesse ligando um holofote.

3. Grayscale(%) – Converte cores para preto e branco.

img {
  filter: grayscale(100%);
}
//efeito clássico vintage ou de jornal.

4. Sépia(%) – Adiciona um tom acastanhado e quente para uma vibe de foto retrô.

img {
  filter: sepia(70%);
}
//como um antigo álbum de fotos.

Há muitos outros filtros com os quais você pode experimentar! Sinta-se à vontade para explorá-los e ver quais efeitos criativos você pode criar.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Você tem quatro imagens em uma galeria. Seu desafio é aplicar os seguintes filtros a cada imagem:

Primeira Imagem (Blur): Aplique um filtro blur(3px) para deixar a imagem suave e fora de foco.
Segunda Imagem (Brightness): Use brightness(2.0) para tornar a imagem mais brilhante.
Terceira Imagem (Grayscale): Aplique grayscale(100%) para tornar a imagem em preto e branco.
Quarta Imagem (Sepia): Use sepia(70%) para dar à imagem um tom quente e vintage.

Folha de consulta

Os filtros CSS permitem alterar visualmente imagens, fundos e texto usando efeitos.

Blur (px) – Torna os elementos suaves e fora de foco:

img {
  filter: blur(5px);
}

Brightness(%) – Controla o quão claro ou escuro algo aparece:

img {
  filter: brightness(150%);
}

Grayscale(%) – Converte cores para preto e branco:

img {
  filter: grayscale(100%);
}

Sepia(%) – Adiciona um tom acastanhado e quente para um efeito de foto retrô:

img {
  filter: sepia(70%);
}

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.