post
Efeito vidro (desfoque de fundo) com CSS
Publicado em: 05/01/2022
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.
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1349
ID de Referência: 1349
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.