[Filtro] Ruído
[Filtro] Ruído Coloque um widget HTML Coloque este código HTML dentro do Widget Código HTML Copiar Código Coloque este código CSS dentro do Widget de HTML (Não esqueça de definir dentro do Background Imagem o URL do NOISE Código CSS Copiar Código .noise { display: block; width: 100vw; height: 100vh; opacity: 0.1; background-image: url(‘LINK-DO-GIF’); overflow: hidden; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 50; mix-blend-mode: plus-lighter; } Baixe o GIF de noise abaixo e coloque dentro da sua Biblioteca de Mídias para pegar o Link e substituir dentro do CSS. Baixe o GIF de Noise Animado, basta dar botão direito em cima e baixar.
[Light/Bg] Pontilhado
[Light/Bg] Pontilhado Coloque um widget HTML Coloque este código HTML dentro do Widget Código HTML Copiar Código Coloque este código CSS dentro do Widget de HTML Código CSS Copiar Código .container::before { content: “”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle, #fff 10%, transparent 10%); /*mude a cor do point no hexadecimal*/ background-size: 30px 30px; } selector{ position: absolute; top: 0; left: 0; width: 100vw; height: 100%; opacity: 0.3; /*opacidade*/ } .elementor-widget-html{ background: transparent !important }
[Light/Bg] Imagens mudando
[Light/Bg] Imagens mudando Coloque um widget HTML Defina a URL das imagens que vão ser trocadas em cada linha do div Código HTML Copiar Código Coloque este código CSS dentro do Widget de HTML Código CSS Copiar Código selector{ position: absolute; width: 100vw; /* Largura total da tela */ height: 100vh; /* Altura total da tela */ top: 50%; left: 50%; transform: translate(-50%,-50%); /* Centraliza o contêiner */ background: #090909; /* Cor de fundo escuro para fallback */ } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; /* Ajusta a imagem */ background-position: center; /* Centraliza a imagem */ opacity: 0; /* Começa invisível */ animation: fade 24s infinite; /* Duração total da animação alterada para 24s */ pointer-events: none; /* Não bloqueia cliques */ } .image:nth-child(1) { animation-delay: 0s; } /* Início imediato */ .image:nth-child(2) { animation-delay: 8s; } /* Segundo item, 8s de atraso */ .image:nth-child(3) { animation-delay: 16s; } /* Terceiro item, 16s de atraso */ @keyframes fade { 0%, 33.333%, 100% { opacity: 0; } /* Início e fim: invisível */ 16.666%, 16.667% { opacity: 1; } /* Meio: visível */ }
[Light/Bg] Luz Mexendo
[Light/Bg] Luz Mexendo Basta definir o código CSS Abaixo dentro do Container que você quer aplicar o efeito de Background Código CSS Copiar Código selector::after { content:””; pointer-events: none; /* Não interage com o mouse */ width: 550px; /* Tamanho do elemento circular */ height:550px; /* Tamanho do elemento circular */ border-radius: 50%; /* Transforma em círculo */ position: absolute; top: 15em; left: 0; z-index:2; transform: translate(-50%, -50%); background: #7B24F880; /* Cor do círculo (roxo com transparência) */ animation: circulo 25s infinite alternate ease-out; /* Duração da animação (25s) */ transition: 0.5s all; filter: blur(120px); /* Intensidade do desfoque */ z-index: 0; /* Camada mais baixa */ } @keyframes circulo{ 0%, 100%{ transform: translatex(50em) translatey(5em); /* Posição A e final */ scale: 1.4; /* Escala maior */ } 50%{ transform: translatex(0em) translatey(-5em); /* Posição B (meio) */ } } selector{ overflow: hidden !important; /* Esconde o círculo que ultrapassa as bordas */ } selector *{ z-index: 3 !important; /* Conteúdo sempre acima */ }
[Light/Bg] Mudando de cor
[Light/Bg] Mudando de cor Basta definir o código CSS Abaixo dentro do Container que você quer aplicar o efeito de Background Código CSS Copiar Código selector { background: linear-gradient(270deg, #090909, rgba(123, 36, 248, 0.5), #090909); /* Gradiente roxo central */ background-size: 600% 600%; /* Tamanho para o efeito de movimento */ -webkit-animation: AnimationName 15s ease infinite; /* Animação WebKit, 15s */ -moz-animation: AnimationName 15s ease infinite; /* Animação Mozilla, 15s */ -o-animation: AnimationName 15s ease infinite; /* Animação Opera, 15s */ animation: AnimationName 15s ease infinite; /* Animação Padrão, 15s */ } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} /* Posição inicial do fundo */ 50%{background-position:100% 50%} /* Movimento para a direita */ 100%{background-position:0% 50%} /* Volta à posição inicial */ } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
[Light/Bg] Pontos de Luz v2
[Light/Bg] Pontos de Luz v2 Basta definir o código CSS Abaixo dentro do Container que você quer aplicar o efeito de Background Código CSS Copiar Código /* Configura o BODY como o contêiner principal para os pseudo-elementos */ body { /* Essencial para posicionar os pseudo-elementos de brilho */ position: relative; /* Garante que os brilhos não se estendam para fora do body */ overflow: hidden; /* Define o tamanho da área de trabalho, ajustável se necessário */ width: 100vw; height: 100vh; /* Adicione uma cor de fundo escura para destacar o brilho, se desejar */ /* background: #0a0a0a; */ } /* Garante que o conteúdo dentro do body fique na frente dos brilhos */ body * { z-index: 9 !important; } /* — ESTILOS BÁSICOS DOS BRILHOS — */ body::before, body::after { top: 50%; left: 20%; width: 380px; height: 380px; border-radius: 600px; content: “”; position: absolute; filter: blur(50px); } /* — 🟢 BRILHO VERDE (Mais rápido e transparente) — */ body::before { /* Cor: Verde Vibrante com 25% de opacidade */ background: rgba(0, 255, 0, 0.25); /* Combinação das animações de redimensionamento e movimento */ animation: efeito 8s linear infinite, move-brilho-1 15s linear infinite alternate; z-index: 3; } /* — ⚪️ BRILHO BRANCO (Mais lento) — */ body::after { /* Cor: Branco Puro */ background: #FFFFFF; /* Combinação das animações de redimensionamento e movimento */ animation: efeito 10s linear infinite, move-brilho-2 20s linear infinite alternate; z-index: 4; } /* — ANIMAÇÃO DE REDIMENSIONAMENTO — */ @keyframes efeito { 0%, 100% { width: 400px; height: 400px; } 30% { width: 600px; height: 600px; } 70% { width: 10px; height: 10px; } } /* — ANIMAÇÕES DE MOVIMENTO FLUTUANTE — */ @keyframes move-brilho-1 { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(50vw, 50vh); } } @keyframes move-brilho-2 { 0% { transform: translate(100%, 50%); } 100% { transform: translate(-100vw, -50vh); } }
[Light/Bg] Vagalumes
[Light/Bg] Vagalumes Adicione um Widget de HTML Coloque esse código HTML dentro do Widget Código HTML Copiar Código Dentro do Widget de HTML va em Avançado/Custom CSS e coloque o esse Código Código HTML Copiar Código .fairy { position: fixed; left: 50%; top: 50%; width: 0.4vw; height: 0.4vw; margin: -0.2vw 0 0 9.8vw; animation: ease 200s alternate infinite; pointer-events: none; } .fairy::before, .fairy::after { content: “”; position: absolute; width: 100%; height: 100%; border-radius: 50%; transform-origin: -10vw; filter:blur(2px); } .fairy::before { background: transparent; opacity: 0.4; animation: drift ease alternate infinite; } .fairy::after { background: #BCCFFF; opacity: 0; box-shadow: 0 0 0vw 0vw #BCCFFF; animation: drift ease alternate infinite, flash ease infinite; } .fairy:nth-child(1) { animation-name: move1; } .fairy:nth-child(1)::before { animation-duration: 11s; } .fairy:nth-child(1)::after { animation-duration: 11s, 10758ms; animation-delay: 0ms, 7588ms; } @keyframes move1 { 0% { transform: translateX(-4vw) translateY(-9vh) scale(0.45); } 3.5714285714% { transform: translateX(3vw) translateY(-39vh) scale(0.77); } 7.1428571429% { transform: translateX(10vw) translateY(10vh) scale(0.36); } 10.7142857143% { transform: translateX(-19vw) translateY(-34vh) scale(0.7); } 14.2857142857% { transform: translateX(-13vw) translateY(-13vh) scale(0.78); } 17.8571428571% { transform: translateX(-38vw) translateY(-40vh) scale(0.99); } 21.4285714286% { transform: translateX(29vw) translateY(-39vh) scale(0.41); } 25% { transform: translateX(-29vw) translateY(-25vh) scale(0.83); } 28.5714285714% { transform: translateX(-39vw) translateY(-7vh) scale(0.68); } 32.1428571429% { transform: translateX(20vw) translateY(-46vh) scale(0.82); } 35.7142857143% { transform: translateX(6vw) translateY(3vh) scale(0.5); } 39.2857142857% { transform: translateX(22vw) translateY(-35vh) scale(0.91); } 42.8571428571% { transform: translateX(-6vw) translateY(32vh) scale(0.7); } 46.4285714286% { transform: translateX(-46vw) translateY(16vh) scale(0.52); } 50% { transform: translateX(33vw) translateY(46vh) scale(0.62); } 53.5714285714% { transform: translateX(-4vw) translateY(8vh) scale(0.81); } 57.1428571429% { transform: translateX(32vw) translateY(32vh) scale(0.26); } 60.7142857143% { transform: translateX(12vw) translateY(47vh) scale(0.99); } 64.2857142857% { transform: translateX(-41vw) translateY(-5vh) scale(0.37); } 67.8571428571% { transform: translateX(42vw) translateY(-22vh) scale(0.56); } 71.4285714286% { transform: translateX(-41vw) translateY(-12vh) scale(0.39); } 75% { transform: translateX(40vw) translateY(46vh) scale(0.83); } 78.5714285714% { transform: translateX(-26vw) translateY(46vh) scale(0.89); } 82.1428571429% { transform: translateX(20vw) translateY(16vh) scale(0.36); } 85.7142857143% { transform: translateX(14vw) translateY(21vh) scale(0.97); } 89.2857142857% { transform: translateX(-25vw) translateY(-36vh) scale(0.36); } 92.8571428571% { transform: translateX(45vw) translateY(28vh) scale(1); } 96.4285714286% { transform: translateX(-38vw) translateY(38vh) scale(0.94); } 100% { transform: translateX(-48vw) translateY(28vh) scale(0.79); } } .fairy:nth-child(2) { animation-name: move2; } .fairy:nth-child(2)::before { animation-duration: 16s; } .fairy:nth-child(2)::after { animation-duration: 16s, 10258ms; animation-delay: 0ms, 3012ms; } @keyframes move2 { 0% { transform: translateX(6vw) translateY(5vh) scale(0.37); } 3.8461538462% { transform: translateX(-11vw) translateY(43vh) scale(0.67); } 7.6923076923% { transform: translateX(-8vw) translateY(-18vh) scale(0.66); } 11.5384615385% { transform: translateX(-13vw) translateY(7vh) scale(0.38); } 15.3846153846% { transform: translateX(6vw) translateY(-17vh) scale(0.91); } 19.2307692308% { transform: translateX(-8vw) translateY(-42vh) scale(0.3); } 23.0769230769% { transform: translateX(-37vw) translateY(-46vh) scale(0.43); } 26.9230769231% { transform: translateX(20vw) translateY(14vh) scale(0.38); } 30.7692307692% { transform: translateX(45vw) translateY(40vh) scale(0.56); } 34.6153846154% { transform: translateX(-10vw) translateY(15vh) scale(0.68); } 38.4615384615% { transform: translateX(35vw) translateY(-12vh) scale(0.79); } 42.3076923077% { transform: translateX(-15vw) translateY(31vh) scale(0.44); } 46.1538461538% { transform: translateX(-45vw) translateY(42vh) scale(0.34); } 50% { transform: translateX(24vw) translateY(41vh) scale(0.58); } 53.8461538462% { transform: translateX(-46vw) translateY(48vh) scale(0.62); } 57.6923076923% { transform: translateX(-37vw) translateY(-27vh) scale(0.56); } 61.5384615385% { transform: translateX(25vw) translateY(-12vh) scale(0.87); } 65.3846153846% { transform: translateX(-14vw) translateY(-10vh) scale(0.96); } 69.2307692308% { transform: translateX(-24vw) translateY(31vh) scale(0.82); } 73.0769230769% { transform: translateX(38vw) translateY(-25vh) scale(0.96); } 76.9230769231% { transform: translateX(-22vw) translateY(25vh) scale(0.29); } 80.7692307692% { transform: translateX(8vw) translateY(-20vh) scale(0.28); } 84.6153846154% { transform: translateX(17vw) translateY(46vh) scale(0.75); } 88.4615384615% { transform: translateX(1vw) translateY(-31vh) scale(0.59); } 92.3076923077% { transform: translateX(-47vw) translateY(19vh) scale(0.93); } 96.1538461538% { transform: translateX(-35vw) translateY(35vh) scale(0.3); } 100% { transform: translateX(42vw) translateY(28vh) scale(0.41); } } .fairy:nth-child(3) { animation-name: move3; } .fairy:nth-child(3)::before { animation-duration: 18s; } .fairy:nth-child(3)::after { animation-duration: 18s, 9791ms; animation-delay: 0ms, 4740ms; } @keyframes move3 { 0% { transform: translateX(-21vw) translateY(33vh) scale(0.47); } 4.7619047619% { transform: translateX(24vw) translateY(-5vh) scale(0.8); } 9.5238095238% { transform: translateX(-38vw) translateY(-18vh) scale(1); } 14.2857142857% { transform: translateX(42vw) translateY(-49vh) scale(0.94); } 19.0476190476% { transform: translateX(-38vw) translateY(42vh) scale(0.28); } 23.8095238095% { transform: translateX(-37vw) translateY(48vh) scale(0.52); } 28.5714285714% { transform: translateX(32vw) translateY(-32vh) scale(0.69); } 33.3333333333% { transform: translateX(-28vw) translateY(16vh) scale(0.63); } 38.0952380952% { transform: translateX(41vw) translateY(2vh) scale(0.78); } 42.8571428571% { transform: translateX(-3vw) translateY(-31vh) scale(0.49); } 47.619047619% { transform: translateX(5vw) translateY(-47vh) scale(0.57); } 52.380952381% { transform: translateX(21vw) translateY(30vh) scale(0.44); } 57.1428571429% { transform: translateX(-27vw) translateY(-4vh) scale(0.65); } 61.9047619048% { transform: translateX(10vw) translateY(-3vh) scale(0.94); } 66.6666666667% { transform: translateX(18vw) translateY(47vh) scale(0.94); } 71.4285714286% { transform: translateX(-19vw) translateY(-8vh) scale(0.96); } 76.1904761905% { transform: translateX(31vw) translateY(15vh) scale(0.68); } 80.9523809524% { transform: translateX(14vw) translateY(37vh) scale(0.79); } 85.7142857143% { transform: translateX(-47vw) translateY(38vh) scale(0.49); } 90.4761904762% { transform: translateX(36vw) translateY(14vh) scale(0.5); } 95.2380952381% { transform: translateX(-16vw) translateY(27vh) scale(0.75); } 100% { transform: translateX(10vw) translateY(-8vh) scale(0.92); } } .fairy:nth-child(4) { animation-name: move4; } .fairy:nth-child(4)::before { animation-duration: 12s; } .fairy:nth-child(4)::after { animation-duration: 12s, 8034ms; animation-delay: 0ms, 3665ms; } @keyframes move4 { 0% { transform: translateX(-37vw) translateY(4vh) scale(0.5); } 4.1666666667% { transform: translateX(-34vw) translateY(-41vh) scale(0.65); } 8.3333333333% { transform: translateX(-7vw) translateY(-35vh) scale(0.3); } 12.5% { transform: translateX(30vw) translateY(4vh) scale(0.51); } 16.6666666667% { transform: translateX(48vw) translateY(0vh) scale(0.48); } 20.8333333333% { transform: translateX(-4vw) translateY(9vh) scale(0.29); } 25% { transform: translateX(-46vw) translateY(-14vh) scale(0.65); } 29.1666666667% { transform: translateX(9vw) translateY(4vh) scale(0.76); } 33.3333333333% { transform: translateX(49vw) translateY(-46vh) scale(0.93); } 37.5% { transform: translateX(-47vw) translateY(-7vh) scale(0.42); } 41.6666666667% { transform: translateX(-7vw) translateY(-19vh) scale(0.77); } 45.8333333333% { transform: translateX(26vw) translateY(32vh) scale(0.75); } 50% { transform: translateX(-48vw) translateY(27vh) scale(0.81); } 54.1666666667% { transform: translateX(20vw) translateY(35vh) scale(0.95); } 58.3333333333% { transform: translateX(25vw) translateY(26vh) scale(0.46); } 62.5% { transform: translateX(47vw) translateY(-29vh) scale(0.28); } 66.6666666667% { transform: translateX(43vw) translateY(-9vh) scale(0.45); } 70.8333333333% { transform: translateX(5vw) translateY(36vh) scale(0.26); } 75% { transform: translateX(15vw) translateY(-32vh) scale(0.34); } 79.1666666667% { transform: translateX(-46vw) translateY(0vh) scale(0.76); } 83.3333333333% { transform: translateX(-24vw) translateY(-25vh) scale(0.63); } 87.5% { transform: translateX(36vw) translateY(6vh) scale(0.82); } 91.6666666667% { transform: translateX(-4vw) translateY(-5vh) scale(0.86); } 95.8333333333% { transform: translateX(35vw) translateY(38vh) scale(0.26); } 100% { transform: translateX(20vw) translateY(-33vh) scale(0.78); } } .fairy:nth-child(5) { animation-name: move5; } .fairy:nth-child(5)::before { animation-duration: 18s; } .fairy:nth-child(5)::after { animation-duration: 18s, 9982ms; animation-delay: 0ms, 2030ms; } @keyframes move5 { 0% { transform: translateX(0vw) translateY(33vh) scale(0.96); } 5.8823529412% { transform: translateX(1vw) translateY(24vh) scale(0.51); } 11.7647058824% { transform: translateX(8vw) translateY(1vh) scale(0.44); } 17.6470588235% { transform: translateX(-32vw) translateY(9vh) scale(0.81); } 23.5294117647% { transform: translateX(-26vw) translateY(-38vh) scale(0.55); } 29.4117647059% { transform: translateX(-45vw) translateY(-42vh) scale(0.44); } 35.2941176471% { transform: translateX(-24vw) translateY(-47vh) scale(0.41); } 41.1764705882% { transform: translateX(-9vw)
[Titulo] Fundo solido cor – Area
[Titulo] Fundo solido cor – Area Adicione um Widget de Título no Elementor No Widget de Titulo coloque o Seguinte Código (em Texto mesmo) <span> Seu </span> texto aqui Depois dentro desse mesmo Widget em avançado coloque esse código CSS. Código CSS Copiar Código selector span.destaquebg { background:#F30000; color:#fff; /* se quiser contraste */ padding:4px 8px; border-radius:4px; }
[Titulo] Fundo solido – Cor
[Titulo] Fundo cor Adicione um Widget de Título no Elementor Não precisa definir Classe CSS Aplique esse código CSS dentro do Widget Código CSS Copiar Código selector{ background: #F30000; }
[Titulo] Brilho Hover
[Titulo] Brilho Hover Adicione um Widget de Título no Elementor Defina a Classe CSS no Widget: brilho-hover Aplique esse código CSS dentro do Widget Código CSS Copiar Código .brilho-hover{ transition: 0.5s all; /* Transição suave */ } .brilho-hover:hover{ text-shadow: 0 0 5px #00FF73, /* Verde vibrante (mais escuro) – Brilho interno */ 0 0 20px #00FF73, 0 0 50px #5DFAA4, /* Verde claro – Brilho intermediário */ 0 0 100px #5DFAA4 !important; /* Verde claro suave – Brilho externo (para fora) */ }