Empilhamento de nomes: o que é e como fazer funcionar
nome em cima do outro é uma técnica que muita gente procura sem saber exatamente o que está buscando. No fundo, trata-se de sobrepor elementos textuais na tela — geralmente para criar um efeito visual onde dois ou mais nomes aparecem empilhados, com um levemente deslocado em relação ao outro. Pode ser usado em logotipos, assinaturas digitais, cards de perfil, ou simplesmente como recurso estilístico em HTML e CSS.
Como fazer nome em cima do outro com CSS puro
A abordagem mais comum envolve position: absolute dentro de um container com position: relative. Você define dois elementos de texto e aplica deslocamentos via top e left. Funciona assim: <div class="stack">
<span class="base">Silva</span>
<span class="overlay">Tech</span>
</div>
No CSS, o container recebe position: relative e dimensões explícitas. O segundo span recebe position: absolute com valores como top: 0.3em; left: 0.1em para criar o efeito de sobreposição controlada. O resultado depende inteiramente do line-height e do font-size que você escolher — se não calcular isso antes, o texto vai conflitar e ficar ilegível. Eu já perdi umas duas horas num projeto real tentando ajustar sobreposição de texto para um logotipo de cliente. O problema era que o texto do "overlay" cortava o da base dependendo do tamanho da viewport. A solução foi colocar o container dentro de uma unidade rem e usar transform: translate() no lugar de top/left, o que evita problemas de fluxo e mantém a sobreposição consistente entre navegadores. Também adicionei white-space: nowrap para evitar quebra de linha indesejada em telas pequenas.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Pegadinhas que ninguém avisa
Uma coisa que os tutoriais não mencionam é que fontes com peso diferente criam desalinhamento visual mesmo quando as coordenadas estão matematicamente corretas. Se o texto de cima for mais grosso, ele vai "invadir" o espaço do de baixo de forma desigual. O workaround é testar sempre com a fonte final, não com placeholder, e ajustar o letter-spacing no elemento superior para compensar. Outro ponto: acessibilidade. Texto sobreposto via CSS ainda precisa ser legível por leitores de tela. Se você usar z-index para empilhar, verifique a ordem tabulação — o navegador pode ler o elemento de trás primeiro se a ordem no DOM não estiver correta. Coloque sempre o texto base antes do overlay no HTML.
Alternativa quando CSS puro não basta
Se o efeito precisa ser mais complexo — como curvas, rotação ou transparência — aí SVG entra no jogo. Um path com <textPath> permite seguir trilhas personalizadas. Existem ferramentas online que geram SVG pronto, mas elas frequentemente produzem markup sujo que quebra em alguns navegadores. Eu prefiro escrever à mão ou usar o Inkscape para controle total. Um recorte prático: se você precisa apenas de um nome em cima do outro para um avatar ou badge simples, uma solução rápida é usar background-clip: text com gradiente sobreposto, mas isso só funciona em navegadores modernos e não é responsivo de forma elegante. Não recomendo para produção se o site precisa rodar em IE ou versões antigas de Safari.
Download e recursos
Não existe um plugin ou biblioteca específica chamada "nome em cima do outro" — é um conceito, não uma ferramenta. Mas se você quer começar rápido, posso indicar um repositório no GitHub com templates prontos de pilevação de texto em CSS e SVG que eu compilei ao longo do tempo. Vale a pena dar uma olhada nos exemplos antes de tentar recriar do zero, porque os edge cases aparecem sempre na primeira vez que você coloca em produção.
