# Efeitos de texto retrô: riso, duplo e rastro

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

Você não precisa de um pacote de filtros para deixar o texto com cara vintage. Três tratamentos, emprestados da impressão barata, de cartazes em offset e de antigas aberturas de TV, fazem quase todo o trabalho.

## The short version

- A maioria dos efeitos de texto retrô vem de três tratamentos: erro de registro riso, eco duplo deslocado e um rastro de cópias repetidas.
- O efeito riso imita a impressão em risografia, em que duas cores de tinta se sobrepõem um pouco fora de alinhamento e se misturam onde se encontram.
- O efeito duplo coloca uma cópia sólida da palavra atrás da original, deslocada por uma pequena distância em uma cor contrastante.
- O efeito rastro repete a palavra várias vezes atrás de si, cada cópia mais longe, sugerindo velocidade ou uma abertura dos anos 70.
- Efeitos retrô ficam melhores em poucas palavras grandes de uma fonte pesada, com cores tiradas do fundo e um único efeito por design.

Quase todo **efeito de texto retrô** que você vê é um de três tratamentos. O **Riso** imita a impressão barata em duas cores, com tintas se sobrepondo um pouco fora de alinhamento. O **Duplo** coloca uma cópia sólida da palavra atrás de si, deslocada em uma segunda cor, como uma serigrafia com uma camada desalinhada. O **Rastro** repete a palavra várias vezes atrás de si, afastando-se, como um letreiro de abertura dos anos 1970 ou uma palavra em movimento. Cada um funciona em poucas palavras grandes de uma fonte pesada, em cores tiradas do design, um efeito de cada vez.

| Efeito | Parece | Transmite | Combina com |
| --- | --- | --- | --- |
| Riso | Duas tintas, levemente fora de registro, misturando-se onde se sobrepõem | Feito à mão, indie, zine | Livrarias, café, shows, estúdios criativos |
| Duplo | Um eco sólido deslocado atrás da palavra | Ousado, pop, serigrafia | Liquidações, streetwear, posts de lançamento |
| Rastro | Várias cópias repetidas se afastando | Movimento, anos 70, psicodélico | Música, eventos, campanhas de verão |

Três tratamentos, três vozes diferentes. Escolha pelo que a mensagem deve transmitir, não pelo que parece mais impressionante.

## O efeito de texto riso

A risografia é uma impressora de estêncil, e cada cor de tinta tem o seu estêncil e o seu tambor, então um design em duas cores é impresso em duas camadas. As camadas raramente se alinham com perfeição, o que deixa uma fresta de cada cor à mostra e uma terceira cor onde as tintas se sobrepõem. Os rosas fluorescentes, azuis vivos e amarelos solares das tintas riso viraram um estilo próprio, popular entre zines, editoras independentes e ilustradores.

- Rosa fluorescente: #ff48b0
- Azul médio: #0078bf
- Amarelo: #ffe800
- Verde-azulado: #00838a
- Vermelho vivo: #f15060
- Papel não revestido: #f4efe6

Aproximações em tela de tintas riso populares, sobre um tom de papel off-white. Escolha duas tintas: rosa e azul, ou amarelo e verde-azulado, são pares clássicos.

Para acertar, mantenha o deslocamento pequeno, uma pequena porcentagem da altura da letra, e deixe as cores se *multiplicarem* onde se sobrepõem, em vez de uma cobrir a outra. Se puder, adicione um pouco de granulação às letras: a tinta riso de verdade se assenta de modo levemente irregular no papel não revestido. Rosa sobre azul dá um violeta profundo na sobreposição, e esse é o detalhe que vende o efeito.

## O efeito de texto duplo

Como técnica, o duplo é o mais simples dos três: uma cópia sólida da palavra, em uma cor contrastante, atrás da original e levemente deslocada. Parece uma serigrafia ou um adesivo, confiante e gráfico. Ao contrário de uma sombra projetada, o eco é nítido e colorido, não escuro e suave. Leve o deslocamento um pouco além do que parece seguro, cerca de 5 a 8 por cento da altura da letra; muito perto e parece um erro.

- Fundo quente, eco vermelho profundo: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Fundo menta, eco azul-marinho: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Fundo violeta, eco rosa: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Fundos que combinam com um efeito duplo. A cor do eco deve contrastar tanto com o fundo quanto com a face da letra.

## O efeito de texto rastro

O rastro repete a palavra de quatro a oito vezes atrás de si, cada cópia mais afastada. Quando as cópias mudam de cor pelo caminho, por uma paleta quente de pôr do sol, por exemplo, surge o inconfundível visual de abertura dos anos 70. Quando perdem opacidade, surge o movimento, como se a palavra tivesse acabado de chegar. Mantenha os passos uniformes e a direção consistente; espaçamento aleatório parece quebrado, não vintage.

Um post vertical com as palavras Far out em letras grandes sobre um degradê quente, com os detalhes de um evento no terraço embaixo

Um título curto e barulhento sobre um fundo quente: a forma de que um tratamento de rastro ou duplo precisa.

Um story vertical de capa para uma feira de editoras pequenas, com o número da edição acima do título e os detalhes embaixo

Um story de feira de zines, em que um acabamento riso em duas cores no título cairia como uma luva.

## Efeitos de texto retrô em CSS

Os três podem ser feitos com `text-shadow`, mais um modo de mesclagem para o riso. Use deslocamentos em `em` para que o efeito acompanhe o tamanho da fonte e mantenha o texto como texto real, selecionável.

```css
/* Double: one crisp echo */
.double {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #b91c1c;
}

/* Trail: repeated copies through a warm palette */
.trail {
  color: #fff7ed;
  text-shadow:
    0.04em 0.04em 0 #fbbf24,
    0.08em 0.08em 0 #f97316,
    0.12em 0.12em 0 #ea580c,
    0.16em 0.16em 0 #c2410c,
    0.20em 0.20em 0 #7c2d12;
}

/* Riso: two inks multiplied, slightly out of register */
.riso {
  position: relative;
  color: #0078bf;
  mix-blend-mode: multiply;
}
.riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff48b0;
  transform: translate(0.04em, -0.03em);
  mix-blend-mode: multiply;
}
```

Para o riso, escreva a palavra duas vezes: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. O multiply funciona em fundos claros, como a tinta de verdade no papel. Alguns leitores de tela anunciam conteúdo gerado, então a palavra pode ser lida duas vezes.

> **O riso precisa de um fundo claro** O multiply escurece, exatamente como a tinta no papel, então some em fundos escuros. Para um design escuro, use o efeito duplo.

## Como usar bem os efeitos de texto retrô

1. **Comece pela fonte certa** Pesada e simples, ou uma serifada macia dos anos 70. [Fontes retrô](https://gradiently.design/pt-br/guide/retro-fonts) lista fontes por década.
2. **Aplique em duas a cinco palavras** Só no título. Os detalhes ficam chapados e simples.
3. **Tire as cores do fundo** O eco, o rastro ou a segunda tinta devem vir da paleta que já está no design.
4. **Mantenha o deslocamento intencional** Pequeno para o riso, um pouco mais ousado para o duplo, em passos uniformes para o rastro.
5. **Use um efeito por design** Riso mais rastro mais contorno é uma fantasia. Um efeito é uma escolha.

### Evite

- Um rastro em um título longo
- Tintas riso sobre fundo preto
- Um eco tão perto que parece defeito de impressão
- Brilhos misturados aos deslocamentos
- Um efeito diferente em cada post

### Faça

- Um rastro em uma ou duas palavras curtas
- Riso em tons de papel e cores claras
- Um deslocamento claro e confiante
- Só cópias sólidas e nítidas
- Um efeito retrô como assinatura da campanha

Para o conjunto mais amplo de tratamentos, incluindo contornos e extrusões, veja [efeitos de texto](https://gradiently.design/pt-br/guide/text-effects), [texto com contorno](https://gradiently.design/pt-br/guide/outline-text) e [efeitos de texto 3D](https://gradiently.design/pt-br/guide/3d-text-effect). A granulação deixa o riso especialmente convincente; [degradês granulados](https://gradiently.design/pt-br/guide/grainy-gradients) mostra como adicioná-la a um fundo.

## Riso, Duplo e Rastro no Gradiently

Os tratamentos de Lettering do Gradiently incluem Riso, Duplo e Rastro, cada um desenhado nas próprias cores do Mark, então não há cópias para empilhar à mão. As versões dele são mais gráficas: o Riso imprime a segunda tinta como um meio-tom fino, um pouco fora de registro; o Duplo desenha letras vazadas com um segundo contorno em volta; o Rastro manda contornos que se desfazem para trás de palavras sólidas. O Mark mantém as palavras legíveis ao levar a região mais calma para trás delas, e a sua granulação dá a um título retrô a superfície impressa que ele pede.

## FAQ

### O que é um efeito de texto riso?

Ele imita a impressão em risografia: duas cores de tinta impressas levemente fora de alinhamento, se sobrepondo e se misturando em uma terceira cor onde se encontram.

### Como fazer um efeito de texto retrô em CSS?

Empilhe cópias sólidas de `text-shadow` sem desfoque. Uma cópia faz o efeito duplo, várias cópias em degraus fazem o rastro e um pseudoelemento com multiply faz o riso.

### Que cores combinam com um efeito de texto dos anos 70?

Degraus quentes de pôr do sol, como dourado, laranja, ferrugem e marrom, sobre um fundo creme ou marrom profundo.

### Qual a diferença entre o efeito duplo e uma sombra projetada?

O duplo é uma cópia nítida e colorida deslocada atrás da palavra. Uma sombra projetada costuma ser escura e desfocada.