Efeito vidro (desfoque de fundo) com CSS - Bruno Devx - BR Criativus

post #1349

Efeito vidro (desfoque de fundo) com CSS

Publicado em: 05/01/2022 / Atualizado em: 05/01/2022

Categorias: BlogCSS

Para aplicar o efeito vidro (desfoque de fundo ou Glassmorphism) em CSS, você deve adicionar o código abaixo na div ou seção de fundo ao texto:

<div class="efeito-vidro">
  <p> Olá, mundo! </p>
</div>

<style>
  .efeito-vidro {
    background: rgba( 255, 255, 255, 0.35 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13.5px );
    -webkit-backdrop-filter: blur( 13.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
  }
</style>

Você pode também acessar o site https://hype4.academy/tools/glassmorphism-generator e editar o efeito que você quer aplicar.

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=1349

ID de Referência: 1349

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato