3D Shadow Depth
Ombre 3D multi-couches en CSS pur — sept niveaux de text-shadow empilés donnent l'illusion que le texte se soulève au survol.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au repos, quatre couches de text-shadow créent la profondeur 3D : chaque couche est décalée de 1 px supplémentaire vers le bas-droite (1px 1px → 4px 4px) et teintée d'une nuance progressivement plus sombre de l'indigo (#4f46e5 → #4338ca → #3730a3 → #312e81). Une cinquième couche floue noire semi-transparente (rgba(0,0,0,.5) 5px 5px 10px) ajoute l'ombre portée ambiante. L'ensemble simule un glyphe extrudé sur une surface plane.
Au survol, text-shadow est étendu à sept couches (jusqu'à 7px 7px) en ajoutant trois niveaux dans la teinte la plus profonde (#1e1b4b), et l'ombre portée passe à rgba(0,0,0,.6) 8px 8px 15px. Simultanément, transform: translate(-3px, -3px) déplace le texte vers le haut-gauche — ce décalage inverse révèle les couches supplémentaires et crée l'illusion que le glyphe « remonte » de la surface.
La propriété transition: .3s anime l'interpolation entre les deux états. Le moteur CSS interpole text-shadow couche par couche (appariement 1:1 entre les deux listes) et transform en parallèle — aucune ligne de JavaScript n'est nécessaire. Pour que transform s'applique à un élément <span> inline, celui-ci doit être un flex item (fils direct d'un conteneur flex) ou déclaré display: inline-block.
Accessibilité
- prefers-reduced-motion absent du code : aucune règle
@media (prefers-reduced-motion: reduce)n'est présente — la transition de survol joue en toutes circonstances. Ajouter@media (prefers-reduced-motion: reduce) { .text-3d-shadow { transition: none; } }si la cible inclut des utilisateurs sensibles au mouvement. - Le texte reste du contenu DOM natif — les lecteurs d'écran le lisent directement, aucun attribut ARIA n'est requis.
- L'effet est purement décoratif : si le CSS est désactivé, le texte reste lisible à 100 %. Aucune information n'est transmise exclusivement par l'ombre.
- Contraste :
#6366f1sur fond#0a0a0f≈ 4,9:1 — conforme WCAG AA pour les grands textes (≥ 24 px bold). Insuffisant pour un corps de texte standard — adapter la couleur si usage à petite taille. - L'état survol (7 couches + translate) est déclenché par pointeur uniquement. Les utilisateurs navigant au clavier ne le verront pas. Si cet état est informatif, ajouter
:focusaux sélecteurs:hover.
Compatibilité navigateur
Nécessite uniquement text-shadow, transform et transition — supportés dans tous les navigateurs depuis 2013. Zéro dépendance externe.
Sans ces propriétés CSS (navigateurs très anciens), le texte s'affiche sans ombre et sans animation — aucune erreur, aucun JS impliqué.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- text-3d-shadow s'applique sur n'importe quel texte -->
<span class="demo-text text-3d-shadow">Votre texte</span>
</div>
<!-- Ou directement sur un titre sémantique -->
<!-- (display:inline-block requis si l'élément n'est pas un flex item) -->
<h1 class="text-3d-shadow"
style="font-size:4rem;font-weight:800;display:inline-block">
Votre titre
</h1>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| color (dans .text-3d-shadow) | #6366f1 | Couleur principale du texte. Les teintes des couches d'ombre doivent être des versions progressivement plus sombres de cette couleur pour maintenir la cohérence de l'extrusion 3D. |
| text-shadow (repos — .text-3d-shadow) | #4f46e5 1px 1px 0, #4338ca 2px 2px 0, #3730a3 3px 3px 0, #312e81 4px 4px 0, rgba(0,0,0,.5) 5px 5px 10px | Profondeur au repos (4 couches + ombre portée). Chaque couche s'éloigne d'1 px supplémentaire — augmenter le pas (2 px, 3 px…) pour un effet plus dramatique, ou réduire le nombre de couches pour un relief subtil. |
| text-shadow (survol — .text-3d-shadow:hover) | … #1e1b4b 5px 5px 0, #1e1b4b 6px 6px 0, #1e1b4b 7px 7px 0, rgba(0,0,0,.6) 8px 8px 15px | Profondeur maximale révélée au survol (7 couches). Les 3 couches supplémentaires (#1e1b4b) créent l'espace qui produit l'illusion de soulèvement. Adapter leur couleur si le fond n'est pas quasi-noir. |
| transform (dans .text-3d-shadow:hover) | translate(-3px, -3px) | Déplacement du texte au survol. Les valeurs doivent correspondre à environ la moitié de la profondeur totale de l'ombre (ici 7 px → 3–4 px). Trop élevé = glissement visible ; trop bas = illusion atténuée. |
| transition (dans .text-3d-shadow) | .3s | Durée de la transition hover. 0,2 s = réactif, 0,5 s = dramatique. Peut inclure une fonction d'assouplissement : transition: .3s ease-out. |
| font-size (dans .demo-text) | 2.5rem | L'effet est lisible à partir de ≈ 2 rem et optimal au-delà de 3 rem. En dessous de 1,2 rem, les couches se superposent et l'illusion disparaît. |
| font-weight (dans .demo-text) | 800 | Une graisse élevée épaissit les glyphes et élargit la surface visible de chaque couche. Weight 700 fonctionne bien ; weight 400 (normal) réduit sensiblement l'effet. |
FAQ
.text-3d-shadow et .text-3d-shadow:hover) suffisent — aucun fichier JS à charger, aucune initialisation. Il fonctionne dans une page statique, un e-mail HTML supportant CSS, et tout framework front-end (React, Vue, Svelte) sans configuration particulière.#3b82f6 → #2563eb → #1d4ed8 → #1e40af → #1e3a8a. La dernière couche peut être proche du noir pour simuler l'ombre portée profonde.class="text-3d-shadow" sur autant d'éléments que nécessaire. Chaque instance est complètement autonome grâce au CSS pur — aucun conflit de sélecteur, aucune coordination JavaScript.
