Texto neon com CSS

61d atrás

Neste tutorial vamos fazer um efeito neon em textos com #CSS puro. Esse efeito também pode ser chamado de glow effect, ou simplesmente, texto iluminado.

Comece adicionando o HTML:

<h1>This is a Heading</h1>

Que é simplesmente um h1, no qual vamos aplicar o efeito.

Agora vamos deixar o body com background escuro, para melhorar a visibilidade do efeito.

body {
    background-color: black;
}

A seguir, estilizaremos o tamanho e cor do texto:

h1 {
    color: white;
    font-size: 5em;
}

Por fim, adicione nos estilos do h1, a propriedade text-shadow, que vai aplicar os sombreamentos que farão o efeito parecido com de luz.

h1 {
    color: white;
    font-size: 5em;
    text-shadow:
        0 0 20px white,
        0 0 30px #00B8D4,
        0 0 40px #00B8D4,
        0 0 50px #00B8D4,
        0 0 60px #00B8D4,
        0 0 70px #00B8D4,
        0 0 80px #00B8D4;
}

Aplicamos 7 níveis de sombreamento, um na cor branca e outros 6 em tom azulado, que darão efeito de luminosidade.

Você pode trocar as cores conforme desejar.

Confira o resultado e o código completo:

Comentários (0)