Estilização de Fundo Gradiente com Borda Arredondada

CSSEstilo
O código CSS fornecido cria um efeito de fundo gradiente com borda arredondada em um elemento HTML usando pseudoelementos e propriedades de máscara. O pseudoelemento :before é usado para criar uma camada de fundo com gradiente e borda arredondada, enquanto a propriedade mask-composite é usada para recortar o conteúdo fora da borda arredondada.

Como instalar

  1. Substitua lab1_selector pelo seletor CSS que corresponde ao elemento HTML que você deseja estilizar no Elementor.
  2. Copie e cole o código fornecido entre as tags <style> e </style> no cabeçalho do seu documento HTML ou em um arquivo CSS externo.
  3. Certifique-se de que o seletor usado está corretamente apontando para o elemento desejado no Elementor.

Explicando o código

  • No bloco de código replicado:
    1. lab1_selector { z-index:0; } – Define o índice de pilha z-index do elemento selecionado para 0, garantindo que ele permaneça na camada base.
  • No segundo bloco de código replicado:
    1. lab1_selector:before {...} – Estiliza o pseudoelemento :before do elemento selecionado.
    2. z-index:-1; – Coloca o pseudoelemento atrás do elemento principal.
    3. position:absolute; e top:0; left:0; right:0; bottom:0; – Estica o pseudoelemento para cobrir todo o elemento principal.
    4. background: linear-gradient(to top, #326189, #32618900); – Cria um gradiente linear do azul para transparente.
    5. As propriedades -webkit-mask, mask, -webkit-mask-composite, e mask-composite – São usadas para criar uma máscara que recorta o conteúdo fora da borda arredondada criada, garantindo que o gradiente siga a borda arredondada do elemento.

Códigos

CSS

				
					.lab1_selector {
    z-index:0;
}

.lab1_selector:before {
    z-index:0;
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 3px;
    margin: 10px;
    border-radius: 25px;
    background: linear-gradient(to top, #326189, #32618900);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

				
			

Relacionados

Efeito de Brilho em Botão do Elementor

Este código CSS aplica um efeito de brilho...
CSSEstilo

Efeito de Gradiente Animado no Botão

Este código CSS é usado para adicionar um...
CSSPersonalização

Adicionando Bordas ao Texto com CSS

O código é utilizado para adicionar bordas ao...
CSSPersonalização

Fale com a Lab1