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

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

O texto extrudido tanto pode parecer uma tabuleta antiga como um banner 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 se conhecem as regras.

## The short version

- Um efeito de texto 3D, ou extrusão, dá profundidade a letras planas ao juntar-lhes lados sólidos que seguem numa só direção.
- As letras extrudidas ficam com bom aspeto quando a profundidade é curta, cerca de 5 a 10 por cento da altura da letra, e os lados são um tom mais escuro do fundo.
- Tipos de letra pesados e simples extrudem bem; os finos, detalhados ou manuscritos transformam-se em confusão.
- Em CSS, um efeito de texto 3D constrói-se empilhando muitas camadas de text-shadow, cada uma deslocada um passo, sem desfocagem.
- Usa texto extrudido em poucas palavras grandes, como um título ou uma tabuleta, nunca em frases.

Um **efeito de texto 3D** faz com que letras planas pareçam sólidas ao juntar-lhes lados, como se cada letra tivesse sido cortada de um bloco e vista ligeiramente de lado. Bem feito, usa um tipo de letra pesado, uma profundidade curta de cerca de 5 a 10 por cento da altura da letra, uma direção consistente e cores laterais tiradas de um tom mais escuro do fundo. Mal feito, usa gradientes, brilhos, profundidades longas e várias direções ao mesmo tempo. Mantém tudo simples e o texto extrudido parece uma tabuleta confiante, não clipart.

## O que faz o texto extrudido parecer bom ou barato

### Parece barato

- Profundidade maior do que a espessura das letras
- Brilhos e chanfros reluzentes
- Lados numa cor sem relação com o design
- Perspetiva que faz as letras inclinar-se para longe
- Extrusão num tipo de letra fino ou manuscrito
- Vários efeitos empilhados numa só palavra

### Parece ponderado

- Profundidade curta, cerca de 5 a 10 por cento da altura
- Lados planos e sólidos, sem brilho
- Cor lateral de um tom mais escuro do fundo
- Uma só direção, normalmente para baixo e para a direita
- Um tipo de letra pesado e simples, de formas abertas
- A extrusão como único efeito

A extrusão tem uma longa história nas tabuletas pintadas à mão, nos cartazes de circo e nas capas de discos dos anos 70. É por isso que transmite calor e uma ponta de nostalgia. Aproveita isso em cafés, gelados, marcas infantis, música e eventos. Para uma marca calma e minimalista, costuma ser a voz errada; os [efeitos de texto](https://gradiently.design/pt-pt/guide/text-effects) ajudam a escolher um que combine.

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

### Profundidade

Os lados devem ser mais curtos do que a largura dos traços das letras. Num título de 160 px, uma profundidade de 8 a 16 px parece sólida; 40 px já parece uma sombra longa, que é outro estilo. O texto pequeno não aguenta profundidade, por isso limita a extrusão a tamanhos de título.

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

A profundidade, em proporção da altura da letra, decide se o texto extrudido parece sólido ou uma sombra.

### Direção

Escolhe uma direção e mantém-na em todos os designs. Para baixo e para a direita é a mais natural, porque tendemos a imaginar a luz a vir de cima e da esquerda. Diretamente para baixo parece uma pilha de blocos. Para cima e para a esquerda parece estranho, o que pode resultar numa única afirmação mas cansa depressa.

### Cor

Três tons fazem todo o trabalho: a face da letra, o lado e o fundo. A face deve contrastar bem com o fundo. O lado fica entre os dois, normalmente um tom profundo do fundo ou da face. Tirá-lo do fundo faz com que a extrusão pareça iluminada pela mesma luz.

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

Dois conjuntos. Letras cremes com lados cor de ferrugem sobre laranja; ou letras cremes com lados azul profundo sobre céu. Em ambos, o lado é um tom mais escuro do fundo.

Uma publicação vertical de uma gelataria com a palavra Bolas em grande sobre um gradiente quente

Uma palavra gorda e um fundo quente: o tipo de título a que as letras extrudidas assentam bem.

Uma publicação quadrada de um evento a anunciar uma festa de rua, com hora e detalhes em letra mais pequena

Duas palavras curtas numa publicação quadrada. Mais do 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 fazem o serviço. Cada camada de `text-shadow` é uma cópia sólida das letras, deslocada um pixel mais, sem desfocagem. Empilhando o suficiente, as cópias fundem-se em lados sólidos. Uma sombra final, 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 para a direita, e uma sombra final suave assenta-a no fundo.

Escrever dezenas de camadas à mão é maçador. Algumas linhas de JavaScript geram a lista para qualquer profundidade, direção e cor, e podes colá-la na tua folha de estilos.

```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
```

Cola o resultado em `text-shadow`. Usa passos de um pixel para os lados ficarem sólidos.

Mantém os títulos extrudidos como texto real num site, para continuarem pesquisáveis, selecionáveis e legíveis por leitores de ecrã. As sombras não alteram o contraste medido entre a letra e o fundo, por isso garante que a cor da face passa por si só. Se preferires uma versão mais leve e gráfica, uma única sombra dura sem camadas está tratada em [sombras de texto](https://gradiently.design/pt-pt/guide/text-shadow-alternatives); para 3D a sério, com luz e rotação, entras em território WebGL, que os [gradientes com shaders](https://gradiently.design/pt-pt/guide/shader-gradients) apresentam.

## Letras extrudidas passo a passo

1. **Escolhe duas a quatro palavras** O nome de uma loja, uma única oferta, o título de um evento. A extrusão precisa de espaço à volta.
2. **Compõe-nas num tipo de letra pesado** Uma sem serifas em peso preto, uma slab ou uma serifada retro e suave. As [fontes retro](https://gradiently.design/pt-pt/guide/retro-fonts) sugerem algumas com o calor certo.
3. **Escolhe as cores da face, do lado e do fundo** Contraste forte entre face e fundo; o lado num tom mais escuro do fundo.
4. **Junta profundidade numa só direção** Começa em cerca de 6 por cento da altura da letra, para baixo e para a direita. Aumenta só se ainda parecer plano.
5. **Deixa tudo o resto plano** Detalhes, datas e preços numa sem serifas simples e sólida, sem efeito.

## Texto extrudido no Gradiently

Extrudir é um dos tratamentos de Letras do Gradiently: dá a qualquer texto no Studio uma profundidade sólida para baixo e para a direita, com lados desenhados nas cores do próprio Mark e um seletor de profundidade, sem camadas para empilhar. O Mark por trás do design move a sua zona mais calma para trás das palavras, por isso as letras extrudidas mantêm-se legíveis por mais que o fundo mude ao longo da imagem. O [efeito de texto com contorno](https://gradiently.design/pt-pt/guide/outline-text) e outros tratamentos estão no mesmo menu, se a extrusão se revelar demasiado forte para a mensagem.

## FAQ

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

Empilha várias camadas de `text-shadow`, cada uma deslocada um pixel mais na mesma direção e sem desfocagem, numa cor mais escura do que a das letras.

### Que tipo de letra funciona melhor num efeito de texto 3D?

Tipos pesados e simples, como uma sem serifas em peso preto, uma slab ou uma serifada retro e suave. Os finos e manuscritos ficam desarrumados quando extrudidos.

### Que profundidade deve ter o texto extrudido?

Cerca de 5 a 10 por cento da altura da letra. Bem mais fundo e passa a parecer uma sombra longa.

### Porque é que o meu texto 3D parece barato?

Normalmente por demasiada profundidade, brilhos ou cores laterais sem relação com o design. Usa lados curtos e planos num tom mais escuro do fundo.