Se você é designer e acompanha as tendências de UI, com certeza se encantou com o efeito Liquid Glass apresentado pela Apple no iOS 16 (ou iOS 26, como mencionado em algumas fontes). Esse efeito translúcido com distorção líquida tornou-se um marco de design moderno, e hoje vou te mostrar como replicá-lo no Elementor usando CSS puro. Prepare-se para elevar seus projetos a um novo patamar!

O que é o Efeito Liquid Glass?

O Liquid Glass é um efeito visual que simula uma superfície de vidro líquido, com distorções sutis e transparência que cria profundidade e sofisticação. Foi popularizado pela Apple em suas interfaces mais recentes, especialmente em menus e elementos interativos. A boa notícia? Você pode recriar esse efeito em seus projetos WordPress com Elementor usando algumas técnicas avançadas de CSS e SVG.

Pré-requisitos

Antes de começarmos, certifique-se de que você tem:

– Elementor Pro instalado (ou alternativa como Pro Elements)

– Conhecimentos básicos de CSS e HTML

– Um projeto onde queira aplicar o efeito (menu, botões, cards, etc.)

Passo a Passo: Como Criar o Efeito Liquid Glass no Elementor

1. Adicionando o Filtro SVG ao Rodapé da Página

O primeiro passo é criar um filtro SVG que será responsável pela distorção líquida. Este código deve ser inserido no final da sua página, usando um widget HTML:

<svg style="display: none">
    <filter id="liquidglass" x="-50%" y="-50%" width="500%" height="500%">
        <feImage x="0" y="0" result="imagemSVG" xlink:href="data:image/svg+xml;utf8,
            <svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>
                <radialGradient id='mapaGradiente' cx='50%' cy='50%' r='50%'>
                    <stop offset='0%' stop-color='rgb(128,128,255)'/>
                    <stop offset='100%' stop-color='rgb(255,255,255)'/>
                </radialGradient>
            </svg>" />
        <feDisplacementMap in="SourceGraphic" in2="imagemSVG" scale="-60" 
            xChannelSelector="R" yChannelSelector="G" result="imagemDistorcida" />
        <feMerge>
            <feMergeNode in="imagemDistorcida" />
        </feMerge>
    </filter>
</svg>

Explicação: Este SVG cria um filtro de deslocamento que distorce visualmente os elementos por trás do vidro, simulando o efeito líquido. O parâmetro `scale=”-60″` controla a intensidade da distorção – experimente valores diferentes para obter resultados variados.

2. Configurando as Variáveis CSS

No painel de CSS personalizado do Elementor (em Configurações da Página > Avançado > CSS Personalizado), adicione as seguintes variáveis:

css
:root {
    --arredondamento: 16px;
    --cordaborda: rgba(255, 255, 255, 0.3);
    --cordoboxinterno: rgba(255, 255, 255, 0.2);
}

Explicação: Essas variáveis facilitam a personalização do efeito:

– `–arredondamento`: Controla o raio das bordas arredondadas

– `–cordaborda`: Define a cor e transparência da borda externa

– `–cordoboxinterno`: Define a cor e transparência do sombreamento interno

3. Criando o Efeito em um Menu

Conteúdo do Widget HTML do Menu

Dentro do seu contêiner de menu, adicione um widget HTML com o seguinte conteúdo:

html
<div class="filtro"></div>
<div class="contorno"></div>

CSS Avançado do Widget HTML do Menu

Nas configurações avançadas do widget HTML, adicione este CSS:

css
selector {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

selector .contorno {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    inset: 0;
    border-radius: var(--arredondamento);
    z-index: 2;
    box-shadow:
        inset 1px 1px 2px var(--cordaborda),
        inset 0 0 5px var(--cordoboxinterno);
}

Explicação: 

– O seletor principal posiciona o widget HTML para cobrir todo o contêiner do menu

– A classe `.contorno` cria as bordas e sombras internas que dão a aparência de vidro

– `pointer-events: none` garante que o efeito não interfira na interação com os itens do menu

4. Aplicando o Efeito em Botões

Conteúdo do Texto do Widget de Botão

No widget de botão do Elementor, no campo de texto, adicione:

html
<div class="filtro"></div><div class="contorno"></div><div class="conteudo textocomsombra">Clique aqui</div>

CSS Avançado do Widget de Botão

Nas configurações avançadas do botão, adicione este CSS:

css
selector .contorno {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    inset: 0;
    border-radius: var(--arredondamento);
    z-index: 2;
    box-shadow:
        inset 1px 1px 3px var(--cordaborda),
        inset 0 0 5px var(--cordoboxinterno);
}

Explicação: A estrutura é similar à do menu, mas com ajustes específicos para botões, como uma sombra interna mais pronunciada (`inset 1px 1px 3px`).

5. Adicionando Sombra ao Texto (Opcional)

Para melhorar a legibilidade do texto sobre o efeito vidro, adicione esta classe aos elementos de texto:

css
.textocomsombra {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

Como aplicar: Basta adicionar a classe `textocomsombra` ao campo de classes CSS do elemento de texto no Elementor.

Personalização Avançada

Ajustando a Intensidade do Efeito Líquido

No filtro SVG, modifique o parâmetro `scale` no `feDisplacementMap`:

– Valores negativos (como `-60`) criam uma distorção para baixo

– Valores positivos criam uma distorção para cima

– Valores mais extremos (como `-100` ou `100`) aumentam o efeito

Mudando as Cores

Altere as cores no gradiente radial do SVG:

html
<stop offset='0%' stop-color='rgb(128,128,255)'/>
<stop offset='100%' stop-color='rgb(255,255,255)'/>

Experimente diferentes combinações para obter efeitos variados – tons azuis criam um aspecto mais tecnológico, enquanto tons dourados podem simular vidro fumê.

Ajustando o Desfoque

No CSS da classe `.filtro`, modifique o valor do `backdrop-filter`:

css
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);

Valores maiores aumentam o desfoque do fundo, criando um efeito mais etéreo.

Dicas de Performance

1. Use com moderação: O efeito é visualmente impressionante, mas pode impactar a performance se usado excessivamente.

2. Teste em diferentes navegadores: Embora a compatibilidade seja boa (96% segundo o vídeo), sempre verifique o resultado nos principais navegadores.

3. Otimize imagens de fundo: Imagens pesadas podem diminuir a fluidez do efeito.

Experimente Mais Efeitos SVG

Para explorar outras possibilidades com filtros SVG, visite o [SVG Filters Playground](https://yoksel.github.io/svg-filters/). Esta ferramenta interativa permite criar e testar diversos filtros SVG que podem ser aplicados em seus projetos.

Conclusão

O efeito Liquid Glass é uma técnica avançada que adiciona sofisticação e modernidade a qualquer interface. Com este tutorial, você pode replicar o visual premium do iOS 26 da Apple em seus projetos WordPress usando Elementor e CSS. Lembre-se de experimentar diferentes configurações para encontrar o equilíbrio perfeito entre impacto visual e performance.

Quer mais tutoriais como este? Deixe seu comentário abaixo e compartilhe este artigo com outros designers que possam se beneficiar desta técnica!