# Effet texte 3D : un lettrage extrudé tout en finesse

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

Un texte extrudé peut ressembler à une enseigne vintage ou à une bannière web de 2004. La différence tient à la profondeur, à la direction et à la couleur, trois points faciles à maîtriser une fois les règles connues.

## The short version

- Un effet texte 3D, ou extrusion, donne du volume à des lettres plates en ajoutant des côtés pleins qui partent dans une seule direction.
- Le lettrage extrudé est réussi quand la profondeur reste courte, environ 5 à 10 % de la hauteur des lettres, et que les côtés sont une teinte plus foncée du fond.
- Les polices grasses et simples s’extrudent bien ; les polices fines, détaillées ou script deviennent un fouillis.
- En CSS, un effet texte 3D se construit en empilant de nombreuses couches de text-shadow, chacune décalée d’un cran de plus, sans flou.
- Réservez le texte extrudé à quelques grands mots, comme un titre ou une enseigne, jamais à des phrases.

Un **effet texte 3D** donne du volume à des lettres plates en ajoutant des côtés, comme si chaque lettre était taillée dans un bloc et vue légèrement de biais. Bien fait, il repose sur une police grasse, une faible profondeur d’environ 5 à 10 % de la hauteur des lettres, une seule direction constante et des côtés tirés d’une teinte plus foncée du fond. Mal fait, il accumule dégradés, reflets brillants, grandes profondeurs et plusieurs directions à la fois. Restez simple et le texte extrudé aura l’allure d’une enseigne assurée, pas d’un clipart.

## Ce qui rend le texte extrudé réussi ou bon marché

### Fait bon marché

- Profondeur plus longue que l’épaisseur des lettres
- Reflets brillants et biseaux
- Côtés d’une couleur sans rapport avec la création
- Perspective qui fait fuir les lettres
- Extrusion sur une police fine ou script
- Plusieurs effets empilés sur un seul mot

### Fait soigné

- Faible profondeur, environ 5 à 10 % de la hauteur
- Côtés plats et pleins, sans brillance
- Couleur des côtés tirée d’une teinte plus foncée du fond
- Une seule direction, le plus souvent vers le bas et la droite
- Une police grasse et simple aux formes ouvertes
- L’extrusion comme seul effet

L’extrusion a une longue histoire dans les enseignes peintes à la main, les affiches de cirque et les pochettes de disques des années 1970. C’est ce qui lui donne un air chaleureux et un peu nostalgique. Appuyez-vous là-dessus pour les cafés, les glaciers, les marques pour enfants, la musique et les événements. Pour une marque calme et minimale, c’est souvent la mauvaise voix ; les [effets de texte](https://gradiently.design/fr/guide/text-effects) aident à en choisir un qui convient.

## Choisir profondeur, direction et couleur

### Profondeur

Les côtés doivent être plus courts que la largeur des traits des lettres. Sur un titre de 160 px, une profondeur de 8 à 16 px paraît pleine ; à 40 px, on dirait une longue ombre, ce qui est un autre style. Un petit texte ne peut pas porter de profondeur : gardez l’extrusion pour les tailles de titre.

| Taille du titre | Profondeur | Effet obtenu |
| --- | --- | --- |
| 100 px | 5 à 8 px | Un léger décollement de la page |
| 160 px | 8 à 16 px | Une enseigne peinte |
| 240 px | 14 à 24 px | Une affiche ou une ligne d’emballage audacieuse |
| Toute taille, profondeur au-delà de 20 % | Longue | Une longue ombre : un style graphique à part |

La profondeur rapportée à la hauteur des lettres décide si le texte extrudé se lit comme un volume plein ou comme une ombre.

### Direction

Choisissez une direction et gardez-la dans toutes vos créations. Vers le bas et la droite est la plus naturelle, car nous imaginons la lumière venant d’en haut à gauche. Tout droit vers le bas évoque des blocs empilés. Vers le haut et la gauche paraît inhabituel : cela peut servir pour une seule déclaration, mais lasse vite.

### Couleur

Trois teintes font tout le travail : la face de la lettre, le côté et le fond. La face doit contraster fortement avec le fond. Le côté se place entre les deux, en général une teinte profonde du fond ou de la face. Le tirer du fond donne l’impression que l’extrusion est éclairée par la même lumière.

- Face : crème: #fff1d6
- Côté : rouille: #c2410c
- Fond : orange: #f97316
- Côté : bleu profond: #1e3a8a
- Fond : ciel: #60a5fa

Deux jeux. Des lettres crème aux côtés rouille sur orange ; ou des lettres crème aux côtés bleu profond sur ciel. Dans chacun, le côté est une teinte plus foncée du fond.

Un post en portrait pour un glacier avec le seul mot Scoops en grand sur un dégradé chaleureux

Un mot bien gras et un fond chaleureux : le genre de titre qui convient au lettrage extrudé.

Un post carré annonçant une fête de quartier avec l’heure et les détails en petits caractères

Deux mots courts sur un post carré. Davantage, et la profondeur commence à encombrer la mise en page.

## Comment faire un effet texte 3D en CSS

Le CSS n’a pas de propriété d’extrusion, mais des ombres empilées font l’affaire. Chaque couche de `text-shadow` est une copie pleine des lettres, décalée d’un pixel de plus, sans flou. Empilez-en assez et les copies fusionnent en côtés pleins. Une dernière ombre plus douce dessous pose les lettres sur la page.

```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);
}
```

Huit couches pleines font une extrusion de 8 px vers le bas et la droite, et une dernière ombre douce les pose sur le fond.

Écrire des dizaines de couches à la main est fastidieux. Quelques lignes de JavaScript produisent la liste pour n’importe quelle profondeur, direction et couleur, à coller dans votre feuille de style.

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

Collez le résultat dans `text-shadow`. Utilisez des pas d’un pixel pour que les côtés restent pleins.

Gardez les titres extrudés en vrai texte sur un site web, pour qu’ils restent indexables, sélectionnables et lisibles par les lecteurs d’écran. Les ombres ne changent pas le contraste mesuré entre la lettre et le fond : veillez à ce que la couleur de face passe seule. Pour une version plus légère et graphique, une seule ombre dure sans couches est traitée dans les [ombres de texte](https://gradiently.design/fr/guide/text-shadow-alternatives) ; pour une vraie 3D avec lumière et rotation, vous entrez dans le territoire de WebGL, que les [dégradés shader](https://gradiently.design/fr/guide/shader-gradients) présentent.

## Réaliser un lettrage extrudé pas à pas

1. **Choisissez deux à quatre mots** Un nom de boutique, une offre unique, un titre d’événement. L’extrusion a besoin d’espace autour d’elle.
2. **Composez-les dans une police grasse** Une sans serif ou une slab en graisse noire, ou une serif rétro douce. Les [polices rétro](https://gradiently.design/fr/guide/retro-fonts) en suggèrent quelques-unes à la bonne chaleur.
3. **Choisissez les couleurs de face, de côté et de fond** Fort contraste entre la face et le fond ; le côté, une teinte plus foncée du fond.
4. **Ajoutez de la profondeur dans une seule direction** Partez d’environ 6 % de la hauteur des lettres, vers le bas et la droite. N’augmentez que si cela paraît encore plat.
5. **Gardez tout le reste plat** Détails, dates et prix dans une sans serif unie et pleine, sans effet.

## Le texte extrudé dans Gradiently

Extrusion est l’un des traitements de Lettrage de Gradiently : il donne à n’importe quel texte du Studio une profondeur pleine vers le bas et la droite, avec des côtés dessinés dans les couleurs du Mark et un réglage de profondeur, donc aucune couche à empiler. Le Mark derrière la création déplace sa zone la plus calme derrière les mots : le lettrage extrudé reste lisible, même quand le fond change dans le cadre. L’[effet texte contour](https://gradiently.design/fr/guide/outline-text) et d’autres traitements sont dans le même menu si l’extrusion s’avère trop bruyante pour le message.

## FAQ

### Comment faire du texte 3D en CSS ?

Empilez plusieurs couches de `text-shadow`, chacune décalée d’un pixel de plus dans la même direction, sans flou, dans une couleur plus foncée que les lettres.

### Quelle police convient le mieux à un effet texte 3D ?

Des polices grasses et simples : sans serif en graisse noire, slab ou serif rétro douce. Les polices fines et script tournent au brouillon une fois extrudées.

### Quelle profondeur donner à un texte extrudé ?

Environ 5 à 10 % de la hauteur des lettres. Beaucoup plus profond, et on lit une longue ombre.

### Pourquoi mon texte 3D fait-il bon marché ?

Le plus souvent, trop de profondeur, des reflets brillants ou des côtés sans rapport avec la création. Utilisez des côtés courts et plats, dans une teinte plus foncée du fond.