[Titulo] Texto Destacado
[Titulo] Texto Destacado Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .elementor-heading-title::before { content: “”; /* cor da faixa de destaque */ background: #FF4347; position: absolute; /* largura da linha */ width: 38%; /* altura da linha */ height: 10px; bottom: -1%; right: -1%; z-index: 0; } .destaque { /* mantém o texto acima da faixa */ z-index: 2 !important; position: relative; }
[Light/Bg] Pulse
[Light/Bg] Pulse Adicione um Widget de HTML e cole o código Código HTML Copiar Código ARSENAL
[Light/Bg] Seguindo o Mouse
[Light/Bg] Seguindo o Mouse Adicione um Widget de HTML e cole o código Código HTML Copiar Código Cole o CSS na seção que receberá o efeito. Você vai criar a seguinte estrutura: 1. Seção principal (configure como largura total)– Adicione o ID: bgluz 2. Dentro da seção, crie um contêiner (largura total)– Adicione a classe: meio 3. Dentro do contêiner .meio, crie um último contêiner– Esse ficará com largura padrão e receberá todo o conteúdo da seção Código CSS Copiar Código .meio::before, .meio::after { content: “”; position: absolute; /* área total do brilho sobre o card */ width: 100%; height: 100%; top: 0; left: 0; /* mantém o formato original do elemento */ border-radius: inherit; /* luz aparece apenas no hover */ opacity: 0; transition: 0.5s; } .meio::before { /* efeito principal da luz seguindo o mouse */ background: radial-gradient( 800px circle at var(–mouse-x) var(–mouse-y), #00FF7350, transparent 40% ); /* mude a cor aqui se quiser */ filter: blur(100px); mix-blend-mode: screen; z-index: 3; } .meio:hover::before { /* ativa luz principal ao passar o mouse */ opacity: 1; } #bgluz:hover .meio::after { /* ativa brilho secundário no hover do container */ opacity: 1; }
[Light/Bg] 2 Pontos de Luz
[Light/Bg] 2 Pontos de Luz Adicione um Widget de Container no Elementor Não precisa definir classe CSS, apenas coloque o CSS no container que quer aplicar o efeito ao fundo Código CSS Copiar Código selector::before { content: “”; position: absolute; /* posição vertical da primeira luz */ top: 15%; /* ajuste lateral — altere conforme seu layout */ left: inherit; right: calc(50% – 800px); /* tamanho da área de brilho */ width: 500px; height: 600px; /* cor da luz principal (identidade visual) */ background: #00FF73; border-radius: 100%; /* intensidade do desfoque */ filter: blur(150px); opacity: 0.3; mix-blend-mode: screen; /* tempo da animação */ animation: luz 5s infinite; pointer-events: none; } selector::after { content: “”; position: absolute; /* posição vertical da segunda luz */ top: 60%; /* ajuste lateral secundário */ left: inherit; right: calc(50% – 400px); /* luz mais larga — ajuste conforme desejado */ width: 10000px; height: 300px; /* cor da segunda luz */ background: #00FF73; border-radius: 100%; /* intensidade do desfoque */ filter: blur(150px); opacity: 0.3; mix-blend-mode: screen; /* tempo e delay da animação */ animation: luz 5s 2s infinite; pointer-events: none; } @keyframes luz { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } }
[Light/Bg] 1 Ponto de Luz
[Light/Bg] 1 Ponto de Luz Adicione um Widget de Container no Elementor Não precisa definir classe CSS, apenas coloque o CSS no container que quer aplicar o efeito ao fundo Código CSS Copiar Código selector::before { content: “”; position: absolute; /* posição da luz no topo do elemento */ top: 10%; /* ajuste horizontal — escolha entre left/right conforme o layout */ left: inherit; right: 50%; /* tamanho geral do brilho */ width: 500px; height: 600px; /* cor principal da luz (use sua cor da identidade visual) */ background: #00FF73; border-radius: 100%; /* intensidade do desfoque do brilho */ filter: blur(150px); /* transparência inicial */ opacity: 0.3; /* modo de mesclagem para efeito luminoso */ mix-blend-mode: screen; /* tempo e repetição do efeito pulsante */ animation: luz 5s infinite; pointer-events: none; } @keyframes luz { /* início e fim — luz apagada */ 0%, 100% { opacity: 0; } /* meio da animação — luz mais forte */ 50% { opacity: 0.5; } }
[Light/Bg] Luz Degrade
[Light/Bg] Luz Degrade Adicione um Widget de Container no Elementor Não precisa definir classe CSS, apenas coloque o CSS no container que quer aplicar o efeito ao fundo Código CSS Copiar Código selector::before{ content: “”; position: absolute; top:50%; left: 50%; width: 800px; height: 800px; transform: translate(-50%, -50%); background: #786b2b;/*cor*/ border-radius: 100%; filter: blur(180px); pointer-events: none !important; z-index: 0; } selector::after{ content: “”; position: absolute; top:0; left: inherit; right: 0; width: 600px; height: 600px; background: #786b2b; /*cor*/ border-radius: 100%; filter: blur(180px); opacity: 0.2; pointer-events: none !important; z-index: 0; }
[Botão] Futurista Matrix
[Botão] Futurista Matrix Adicione um Widget de botão no Elementor Defina a classe: btn Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .btn{ width: fit-content; position: relative; /* ancora os pseudos ::before/::after */ background: linear-gradient(0deg, #00FF73 0%, #68FFAC 100%); /* cor do BG aqui */ } .btn:hover{ background: transparent; box-shadow: none; } .btn::before, .btn::after{ content: ”; position: absolute; top: 0; right: 0; height: 2px; width: 0; background: #00FF73; /* cor principal da borda no hover */ box-shadow: -1px -1px 5px 0px #68FFAC, /* brilho verde claro */ 7px 7px 20px 0px #00C8FF, /* toque ciano p/ contraste */ 4px 4px 5px 0px #00FF73; /* verde principal */ transition: 400ms ease all; } .btn::after{ right: inherit; top: inherit; left: 0; bottom: 0; } .btn:hover::before, .btn:hover::after{ width: 100%; transition: 800ms ease all; }
[Botão] + Animação de Ícone
[Botão] + Animação de Ícone Adicione um Widget de botão no Elementor Não precisa definir classe Defina um ícone (como nesse exemplo usei uma arrow right) Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ background-image: linear-gradient(150deg, #00FF73, #68FFAC); /* Gradiente de fundo (verde) */ border: 2px solid #00FF73; /* Borda (verde) */ border-radius: 6px; /* Arredondamento */ box-shadow: 0 10px 40px -16px #00FF7380; /* Sombra verde (hex com alfa) */ transition: .5s all; /* Transição suave */ } .elementor-button:hover{ transform: translate(0, -3px); /* movimento sutil */ } .elementor-button:hover .elementor-button-icon{ animation: moveIcon 1.5s linear infinite; /* anima ícone no hover */ } .elementor-button-icon{ margin-top: 0px; /* alinhar ícone ao centro */ } @keyframes moveIcon{ 0% { transform: translateX(0); } 50% { transform: translateX(8px); } 100% { transform: translateX(0); } }
[Botão] Brilho Fundo
[Botão] Brilho Fundo Adicione um Widget de botão no Elementor Não precisa definir classe Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ background: #00FF73 !important; border: 1px solid #00FF73 !important; /*defina a borda*/ box-shadow: 0 0 5px #00FF73, /*defina o brilho*/ 0 0 20px #00FF73, /*defina o brilho*/ 0 0 50px #00FF73, /*defina o brilho*/ 0 0 100px #00FF73 !important; /*defina o brilho*/ }
[Botão] Cortes de canto
[Botão] Cortes de canto Adicione um Widget de botão no Elementor Não precisa definir classe Recomendo deixar a cor de fundo do botão sem cor (transparente) Corte (embaixo e a direita) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-45deg, transparent 10px, #00FF73 0); } Corte (embaixo e a esquerda) Código CSS Copiar Código .elementor-button{ background: linear-gradient(45deg, transparent 10px, #00FF73 0); } Corte (Superior e a esquerda) Código CSS Copiar Código .elementor-button{ background: linear-gradient(45deg, transparent 10px, #00FF73 0); } Corte (Superior/Direita) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-135deg, transparent 10px, #00FF73 0); } Corte (Dois cantos) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-135deg, transparent 10px, #00FF73 0) right, linear-gradient(45deg, transparent 10px, #00FF73 0) left; background-size: 50% 100%; background-repeat: no-repeat; } Corte (Quatro cantos) Código CSS Copiar Código .elementor-button{ background: linear-gradient(135deg, transparent 10px, #00FF73 0) top left, linear-gradient(-135deg, transparent 10px, #00FF73 0) top right, linear-gradient(-45deg, transparent 10px, #00FF73 0) bottom right, linear-gradient(45deg, transparent 10px, #00FF73 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }