# Efeito de texto 3D: letras extrudadas com bom gosto

[Canonical HTML page](https://gradiently.design/pt-br/guide/3d-text-effect)

Letras extrudadas podem parecer uma placa vintage ou um banner de site de 2004. A diferença está na profundidade, na direção e na cor, e as três são fáceis de acertar quando você conhece as regras.

## The short version

- Um efeito de texto 3D, ou extrusão, dá profundidade a letras planas ao adicionar laterais sólidas que seguem numa única direção.
- Letras extrudadas ficam elegantes quando a profundidade é curta, entre 5 e 10 por cento da altura da letra, e as laterais são um tom mais escuro do fundo.
- Fontes pesadas e simples extrudam bem; fontes finas, detalhadas ou cursivas viram bagunça.
- Em CSS, um efeito de texto 3D é feito empilhando várias camadas de text-shadow, cada uma deslocada um passo além, sem desfoque.
- Use letras extrudadas em poucas palavras grandes, como um título ou uma placa, nunca em frases.

Um **efeito de texto 3D** faz letras planas parecerem sólidas ao adicionar laterais, como se cada letra fosse cortada de um bloco e vista levemente de lado. Bem feito, ele usa uma fonte pesada, uma profundidade curta de cerca de 5 a 10 por cento da altura da letra, uma direção constante e laterais num tom mais escuro do fundo. Mal feito, ele usa degradês, brilhos, profundidades longas e várias direções ao mesmo tempo. Mantenha tudo simples e o texto extrudado parece uma placa confiante, não um clip art.

## O que faz um texto extrudado parecer bom ou barato

### Parece barato

- Profundidade maior que a espessura das letras
- Brilhos e chanfros
- Laterais numa cor sem relação com o design
- Perspectiva que faz as letras tombarem para trás
- Extrusão numa fonte fina ou cursiva
- Vários efeitos empilhados numa só palavra

### Parece pensado

- Profundidade curta, cerca de 5 a 10 por cento da altura
- Laterais planas e sólidas, sem brilho
- Cor da lateral num tom mais escuro do fundo
- Uma direção, normalmente para baixo e à direita
- Uma fonte pesada e simples, com formas abertas
- A extrusão como único efeito

A extrusão tem uma longa história em placas pintadas à mão, cartazes de circo e capas de disco dos anos 1970. Essa história explica por que ela soa calorosa e um pouco nostálgica. Aproveite isso para cafés, sorveterias, marcas infantis, música e eventos. Para uma marca calma e minimalista, costuma ser a voz errada; [efeitos de texto](https://gradiently.design/pt-br/guide/text-effects) ajuda a escolher um que combine.

## Como escolher profundidade, direção e cor

### Profundidade

As laterais devem ser mais curtas que a largura dos traços da letra. Num título de 160 px, uma profundidade de 8 a 16 px parece sólida; com 40 px começa a parecer uma sombra longa, que é outro estilo. Texto pequeno não aguenta profundidade nenhuma, então use extrusão só em tamanhos de título.

| Tamanho do título | Profundidade | Sensação |
| --- | --- | --- |
| 100 px | 5 a 8 px | Um leve relevo sobre a página |
| 160 px | 8 a 16 px | Uma placa pintada |
| 240 px | 14 a 24 px | Um cartaz ousado ou uma linha de embalagem |
| Qualquer tamanho, profundidade acima de 20% | Longa | Uma sombra longa: um estilo gráfico à parte |

A profundidade em relação à altura da letra decide se o texto extrudado parece sólido ou parece uma sombra.

### Direção

Escolha uma direção e mantenha em todos os designs. Para baixo e à direita é a mais natural, porque tendemos a ler a luz como vinda de cima e da esquerda. Direto para baixo lembra blocos empilhados. Para cima e à esquerda parece incomum, o que funciona numa frase única mas cansa rápido.

### Cor

Três tons fazem todo o trabalho: a face da letra, a lateral e o fundo. A face deve contrastar bastante com o fundo. A lateral fica entre os dois, normalmente um tom profundo do fundo ou da face. Tirar a cor do fundo faz a extrusão parecer iluminada pela mesma luz.

- Face: creme: #fff1d6
- Lateral: ferrugem: #c2410c
- Fundo: laranja: #f97316
- Lateral: azul profundo: #1e3a8a
- Fundo: céu: #60a5fa

Dois conjuntos. Letras creme com laterais ferrugem sobre laranja; ou letras creme com laterais azul profundo sobre céu. Em cada um, a lateral é um tom mais escuro do fundo.

Um post vertical de sorveteria com a palavra Bolas em tamanho grande sobre um gradiente quente

Uma palavra gorda e um fundo quente: o tipo de título que combina com letras extrudadas.

Um post quadrado anunciando uma festa na rua, com horário e detalhes em letras menores

Poucas palavras curtas num post quadrado. Mais que isso e a profundidade começa a apertar o layout.

## Como fazer um efeito de texto 3D em CSS

O CSS não tem uma propriedade de extrusão, mas sombras empilhadas resolvem. Cada camada de `text-shadow` é uma cópia sólida das letras, deslocada um pixel além, sem desfoque. Empilhe camadas suficientes e as cópias se fundem em laterais sólidas. Uma última sombra, mais suave, por baixo, assenta as letras na página.

```css
.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}
```

Oito camadas sólidas criam uma extrusão de 8 px para baixo e à direita, e uma sombra final suave assenta tudo no fundo.

Escrever dezenas de camadas à mão é cansativo. Algumas linhas de JavaScript geram a lista para qualquer profundidade, direção e cor, e você só cola no seu CSS.

```js
// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down
```

Cole o resultado em `text-shadow`. Use passos de um pixel para as laterais ficarem sólidas.

Num site, mantenha os títulos extrudados como texto real, para que continuem pesquisáveis, selecionáveis e legíveis por leitores de tela. As sombras não mudam o contraste medido entre letra e fundo, então garanta que a cor da face passe sozinha. Se preferir uma versão mais leve e gráfica, uma única sombra dura sem camadas aparece em [sombras de texto](https://gradiently.design/pt-br/guide/text-shadow-alternatives); para 3D de verdade, com luz e rotação, você entra no território do WebGL, que [gradientes com shader](https://gradiently.design/pt-br/guide/shader-gradients) apresenta.

## Como criar letras extrudadas passo a passo

1. **Escolha de duas a quatro palavras** O nome de uma loja, uma oferta, o título de um evento. A extrusão precisa de espaço em volta.
2. **Use uma fonte pesada** Uma sem serifa em peso black, uma slab ou uma serifada retrô suave. [Fontes retrô](https://gradiently.design/pt-br/guide/retro-fonts) sugere algumas com o calor certo.
3. **Escolha as cores da face, da lateral e do fundo** Contraste forte entre face e fundo; a lateral num tom mais escuro do fundo.
4. **Adicione profundidade numa direção** Comece com cerca de 6 por cento da altura da letra, para baixo e à direita. Aumente só se ainda parecer plano.
5. **Deixe todo o resto plano** Detalhes, datas e preços numa sem serifa simples e sólida, sem efeito.

## Texto extrudado no Gradiently

Extrusão é um dos efeitos de Lettering do Gradiently: ele dá profundidade sólida, para baixo e à direita, a qualquer texto no Studio, com laterais desenhadas nas cores do próprio Mark e um controle de profundidade, então não há camadas para empilhar. O Mark atrás do design leva sua área mais calma para trás das palavras, e assim as letras extrudadas continuam legíveis por mais que o fundo mude no quadro. O [efeito de texto com contorno](https://gradiently.design/pt-br/guide/outline-text) e outros tratamentos estão no mesmo menu, caso a extrusão fique barulhenta demais para a mensagem.

## FAQ

### Como faço texto 3D em CSS?

Empilhe várias camadas de `text-shadow`, cada uma deslocada um pixel além na mesma direção, sem desfoque, numa cor mais escura que as letras.

### Qual fonte funciona melhor para um efeito de texto 3D?

Fontes pesadas e simples, como uma sem serifa black, uma slab ou uma serifada retrô suave. Fontes finas e cursivas ficam confusas quando extrudadas.

### Qual deve ser a profundidade de um texto extrudado?

Cerca de 5 a 10 por cento da altura da letra. Muito mais que isso e ele passa a parecer uma sombra longa.

### Por que meu texto 3D parece barato?

Normalmente por excesso de profundidade, brilhos ou laterais em cores sem relação com o design. Use laterais curtas e planas num tom mais escuro do fundo.