[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; }