Crie um efeito de brilho RGB animado com Glassmorphism (HTML/CSS). Guia passo a passo para modernizar seus projetos web.
Pré-requisitos
Conhecimento básico de HTML e CSS.
Passo 1: Estrutura HTML
Precisamos de um elemento “container” (.base-cartao) que servirá de base para o nosso cartão. O efeito RGB será aplicado a um pseudo-elemento ::before dentro do container.
html
<div class="base-cartao">
<div class="cartao-conteudo">
<h2>Resultado Final</h2>
<p>Conteúdo do cartão.</p>
</div>
</div>
Passo 2: Estilo Base do Cartão
Vamos estilizar a base do cartão para que ele tenha um fundo, position: relative (necessário para posicionar o ::before de forma absoluta).
css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
margin: 0;
font-family: sans-serif;
}
.base-cartao{
display: flex;
position: relative;
padding: 5px;
border-radius: 20px;
align-items: center;
justify-content: center;
}
Passo 3: Estilizando o cartão
.cartao-conteudo{
width: 400px;
height: 300px;
background: #ffffff11;
border-radius: 15px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ffffff14;
backdrop-filter: blur(90px);
flex-direction: column;
box-shadow: 3px 3px 10px #00000066, inset 0 0 20px #FFFFFF33;
}
.cartao-conteudo h2, .cartao-conteudo p{
color: white;
margin: 0;
}
Passo 4: Criando o Brilho RGB (::before)
Aqui é onde a mágica acontece. Usaremos o conic-gradient para criar o espectro de cores e o filter: blur() para suavizar as bordas.
css
.base-cartao::before {
content: "";
position: absolute;
left: -70%;
width: 600px;
height: 600px;
border-radius: 50%;
background-image: conic-gradient(from 0deg at 50% 50%,
#ff0000 0%, #ff7107 9%, #ffe207 23%,
#26ff07 38%, #07fbff33 52%, #0724ff 66%,
#8507ff 78%, #ff07f133 91%, #ff0000 100%);
filter: blur(50px);
animation: spin 12s infinite linear;
}
Passo 5: Animando o Brilho com Keyframes
Como discutido anteriormente, a melhor maneira de animar o conic-gradient é animar a propriedade transform: rotate() no próprio pseudo-elemento ::before.
css
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Código Completo (CSS)
Juntando tudo, você tem um efeito de vidro fosco com um belo brilho RGB animado:
css
.base-cartao{
display: flex;
position: relative;
padding: 5px;
border-radius: 20px;
align-items: center;
justify-content: center;
}
.base-cartao::before {
content: "";
position: absolute;
left: -70%;
width: 600px;
height: 600px;
border-radius: 50%;
background-image: conic-gradient(from 0deg at 50% 50%,
#ff0000 0%, #ff7107 9%, #ffe207 23%,
#26ff07 38%, #07fbff33 52%, #0724ff 66%,
#8507ff 78%, #ff07f133 91%, #ff0000 100%);
filter: blur(50px);
animation: spin 12s infinite linear;
}
.cartao-conteudo{
width: 400px;
height: 300px;
background: #ffffff11;
border-radius: 15px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ffffff14;
backdrop-filter: blur(90px);
flex-direction: column;
box-shadow: 3px 3px 10px #00000066, inset 0 0 20px #FFFFFF33;
}
.cartao-conteudo h2, .cartao-conteudo p{
color: white;
margin: 0;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Resultado Final
Conteúdo do cartão.
Encontre mais dicas com essa na nossa seção de Tutoriais. Para não perder nossas novidades, nos siga no Instagram.