[Light/Bg] Linhas Horizontais
[Light/Bg] Linhas Horizontais 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 { width: 100%; height: 100%; background-image: repeating-linear-gradient( 0deg, rgba(0, 255, 115, 1), /*mude a cor da linha*/ 1px, transparent 10px, /*espessura da linha*/ transparent ); background-size: 100% 40px; /*dstância das linhas nos 30px*/ } selector{ position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: .4; /*opacidade das linhas*/ /*as 2 linhas abaixo são para fazer um gradient suave*/ mask-image: linear-gradient(to top, transparent, #000000 35%, transparent 100%); -webkit-mask-image: linear-gradient(to top, transparent, #000000 35%, transparent 100%); }
[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)
[Cursor] Luzes Animadas Cursor
[Cursor] Luzes seguindo o cursor No container que você quer o efeito, em avançado defina o ID CSS: tubes-section Cole o seguinte código dentro desse mesmo container ID: tubes-section Código Copiar Código /* transforma a seção em um contêiner para o canvas animado */ #tubes-section { position: relative; overflow: hidden; /* evita que a animação ultrapasse a seção */ min-height: 100vh; /* ajuste conforme o tamanho desejado da seção */ } /* canvas da animação fica no fundo */ #tubesCanvasSection { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* impede interação com o mouse */ } /* garante que o conteúdo fique acima do canvas */ #tubes-section > .elementor-container, #tubes-section .elementor-widget-wrap { position: relative; z-index: 1; } Coloque um Widget HTML na sua página (pode ser no rodapé) E coloque esse código dentro: Código Copiar Código /* transforma a seção em um contêiner para o canvas animado */ #tubes-section { position: relative; overflow: hidden; /* evita que a animação ultrapasse a seção */ min-height: 100vh; /* ajuste conforme o tamanho desejado da seção */ } /* canvas da animação fica no fundo */ #tubesCanvasSection { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* impede interação com o mouse */ } /* garante que o conteúdo fique acima do canvas */ #tubes-section > .elementor-container, #tubes-section .elementor-widget-wrap { position: relative; z-index: 1; }
[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; }